pire.XLS for .NET是一款專業的 .NET Excel 組件， 它可以用在各種 .NET 框架中，包括 .NET Core、ASP.NET 和 Windows Forms 等相關的 .NET 應用程序。Spire.XLS for .NET 提供了一個對象模型 Excel API，使開發人員可以快速地在 .NET 平臺上完成對 Excel 的各種編程操作，如根據模板創建新的 Excel 文檔，編輯現有 Excel 文檔以及對 Excel 文檔進行轉換。

近日，Spire.XLS for .NET更新至v10.3.0，此版本主要修復了XLS轉PDF/HTML及操作文檔時出現的問題，點擊文末“了解更多”下載最新版。

Bug修復

• 解決了數據標簽文本顏色沒有被設置成功的問題。
• 解決了獲取趨勢線公式失敗的問題。
• 解決了XLS轉HTML單元格寬度未保持一致的問題。
• 解決了加載CSV拋NullReferenceException異常的問題。
• 解決了公式值獲取失敗的問題。
• 解決了轉Excel到PDF括號格式不正確的問題。

此版本修復了許多轉換時的Bug問題，不如一起來回顧一下Spire.XLS的格式轉換功能有哪些吧。

整個Excel工作薄保存為PDF

Workbook workbook = new Workbook();
workbook.LoadFromFile("Test.xlsx");

//將整個工作薄保存為PDF
workbook.SaveToFile("WorkbookToPDF.pdf", Spire.Xls.FileFormat.PDF);

Excel工作表轉圖片

//初始化workbook實例
Workbook workbook = new Workbook();

//加載Excel文檔
workbook.LoadFromFile("Sample.xlsx");

//獲取第一個工作表
Worksheet sheet = workbook.Worksheets[0];

//將工作表保存為圖片
sheet.SaveToImage("ExceltoImage.png", ImageFormat.Png);

Excel工作表中的圖表轉圖片

//初始化workbook實例
Workbook workbook = new Workbook();

//加載Excel文檔
workbook.LoadFromFile("Sample.xlsx");

/獲取第一個工作表
Worksheet sheet = workbook.Worksheets[0];

//將圖表保存為圖片
Image[] imgs = workbook.SaveChartAsImage(sheet);

for (int i = 0; i < imgs.Length; i++) { imgs[i].Save(string.Format("img-{0}.png", i), ImageFormat.Png); }

將Excel中的圖片以base64 string data嵌入到HTML中

//加載Excel sample
Workbook workbook = new Workbook();
workbook.LoadFromFile("Sample.xlsx");

//獲取第一個Excel工作表
Worksheet sheet = workbook.Worksheets[0];

//嵌入Excel圖片到HTML
HTMLOptions options = new HTMLOptions();
options.ImageEmbedded = true;

//保存Excel到HTML
sheet.SaveToHtml("Sample2.html",options);

將Excel文檔另存為HTML格式

//加載Excel sample
Workbook workbook = new Workbook();
workbook.LoadFromFile("Sample.xlsx");

//獲取第一個Excel工作表
Worksheet sheet = workbook.Worksheets[0];

//保存Excel到HTML
sheet.SaveToHtml("Sample.html");

將 Excel 工作簿轉換到 SVG 格式

//創建workbook對象
 Workbook workbook = new Workbook(); 
 //加載文件
 workbook.LoadFromFile(@"ToSVGSample.xlsx");
 for (int i = 0; i < workbook.Worksheets.Count; i++) { FileStream fs = new FileStream(string.Format("result{0}.svg", i), FileMode.Create); //轉換到SVG workbook.Worksheets[i].ToSVGStream(fs, 0, 0, 0, 0); fs.Flush(); fs.Close(); }

將CSV轉到Excel

//初始化Workbook對象
Workbook wb = new Workbook();

//加載CSV文件
wb.LoadFromFile("SampleCSVFile.csv", ",",1,1);

//將第一個工作表命名為“導入Excel”
wb.Worksheets[0].Name = "導入Excel";

//轉換為Excel文件
wb.SaveToFile("toExcel.xlsx", ExcelVersion.Version2013);

將CSV轉到PDF

于實現文檔在線預覽的做法，之前文章提到了的兩種實現方式：

1、通過將文檔轉成圖片：詳見《文檔在線預覽新版（一）通過將文件轉成圖片實現在線預覽功能》；

2、將文檔轉成html：詳見《文檔在線預覽新版（二）通過將文件統一轉成html以實現在線預覽》；

3、將文檔轉成pdf：詳見 《文檔在線預覽新版（三）通過將文件統一轉成pdf來實現在線預覽》；

其實除了這三種實現方式之外之外，還有一種常見的做法就是在統一都由前端通過相關的在線預覽組件來實現預覽

實現方案

在網上的找了一圈實現方案，發現還挺多開源組件可以實現，整理了一下這些開源組件放在了下面的表格里，里面有一些是可以直接通過npm在vue中引入使用。

一、docx文件實現前端預覽

1、docx-preview

是一個 純前端的JavaScript庫，它的優點是可以后端就實現對 .docx 的文件進行在線預覽，但是缺點是 不支持.doc(劃重點)。

github地址：https://github.com/VolodymyrBaydalka/docxjs

demo示例：https://volodymyrbaydalka.github.io/docxjs

安裝：

npm install docx-preview -S

使用效果：

2、Mammoth

Mammoth 原理是將 .docx 文檔并將其轉換為 HTML。 注意Mammoth 轉換過程中復雜樣式被忽，居中、首行縮進等，此外同樣也只能轉換.docx文檔。

github地址：https://github.com/mwilliamson/mammoth.js

安裝：

npm install mammoth

二、PDF文件實現前端預覽

1、pdf.js

pdf.js是一款非常優秀的pdf解析工具，其實火狐瀏覽器內核自帶pdf預覽解析器就是pdf.js這個解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺可以看到源碼內容。

官網地址：http://mozilla.github.io/pdf.js

github地址：https://github.com/mozilla/pdf.js

demo示例：https://mozilla.github.io/pdf.js/web/viewer.html

使用效果：

2、pdfobject.js

PDFObject.js - 將PDF嵌入到一個div內，而不是占據整個頁面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過配置PDF.js來實現

官網地址: https://pdfobject.com/

github地址：https://github.com/pipwerks/PDFObject

實現效果：

3、vue-pdf

Vue-pdf是通過Vue下基礎基于 pdf.js 組件實現PDF文件的展示，操作和生成的組件。

github地址：https://github.com/FranckFreiburger/vue-pdf

demo示例：https://jsfiddle.net/fossfiddler/5k4ptmqg/145/

安裝：

npm install --save vue-pdf

實現效果：

4、iframe / object/ embed

iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內嵌在這三個HTML標簽內，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當于一個新的頁面內嵌在當前頁面中。

<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>

實現效果：

三、Excel文件實現前端預覽

1、sheetjs js-xlsx

js-xlsx是sheetJS出品的讀取和導出各種ecxel的工具庫，功能十分強大。

xlsx官方文檔：https://www.npmjs.com/package/xlsx

github倉庫： https://github.com/SheetJS/sheetjs

安裝：

npm install xlsx

js-xlsx可以用二進制流方式讀取得到整份excel表格對象

let workbook = XLSX.read(data, { type: "array" });   //表格對象
let sheetNames = workbook.SheetNames;  //獲取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]];  //取第一張表

獲取表格數據后再調用js-xlsx提供的方法，直接將表格數據轉換為html代碼，再將html代碼渲染到指定容器就完成了

let html = XLSX.utils.sheet_to_html(worksheet);

實現效果：

2、canvas-datagrid

基于 canvas 來渲染表格，支持表格過濾、數據編輯、自定義操作菜單、大數據場景優化、主題樣式修改

github地址：https://github.com/TonyGermaneri/canvas-datagrid

demo示例：https://codesandbox.io/s/handsontable-vue-data-grid-hello-world-app-forked-z288wy

安裝：

npm install canvas-datagrid

3、 handsontable

handsontable基于 DOM 元素來渲染表格，功能強大，canvas-datagrid` 支持的功能它都支持，并且主題樣式擴展更方便

官網地址：https://handsontable.com/docs/7.1.0/tutorial-custom-build.html

github地址：https://github.com/handsontable/handsontable

文檔地址：https://handsontable.com/docs/javascript-data-grid

安裝：

npm install handsontable @handsontable/vue

Demo示例：https://handsontable.com/demo

實現效果：

4、DataTables

基于Jquery 表格插件DataTables的一個表格插件，還在用Jquery 可以以考慮這個

官網地址：https://www.datatables.net

安裝：

官網下載地址，在你的項目中使用 DataTables，只需要引入三個個文件即可，jQuery庫，一個DataTables的核心js文件和一個DataTables的css文件。有的時候還需要DataTables樣式的一些資源。

<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>

使用方式：

$('#example').DataTable( {
    data: data
} );

四、pptx文件實現前端預覽

1、PPTXJS

PPTXJS是jquery的一個插件，她的主要功能是實現pptx轉html，用于在線進行展示

官網地址：https://pptx.js.org/index.html

github地址：https://github.com/meshesha/PPTXjs

PPTXjs | Demos

使用示例：

<div id="slide-resolte-contaniner" ></div> 
<script> 
  $("#slide-resolte-contaniner").pptxToHtml({ 
    pptxFileUrl: "Sample_demo1.pptx", 
    slidesScale: "50%", 
    slideMode: false, 
    keyBoardShortCut: false 
  }); 
</script>

實現效果：

總結

本文主要介紹了word、excel、pdf、ppt等文件純前端實現在線預覽的方式，具體實現可以是：

1、前端根據不同文件類型使用對應的在線預覽組件進行在線預覽。

前端通過判斷不同文件類型的使用對應的在線預覽組件進行在線預覽。 因為不同類型的在線預覽組件不一樣在使用時預覽界面會存在差異，如果需要做的完善一點 最好是把所有用到的組件都統一封裝的一個在線預覽的UI界面中。

2、后端配合將不同格式的文件轉換成pdf，轉成統一的文件格式，再由前端實現預覽效果

從本文的測試情況來看前端實現預覽最好的效果還是PDF，不會出現一些文字錯亂和亂碼的問題，這樣能保留文件的一些樣式的效果，同時前端也只用支持一種文件格式的預覽，工作量也能大大降低。

以上就是使用js前端實現word、excel、pdf、ppt等文件在線預覽的方式的全部內容，感謝大家的閱讀！

近實現的導出數據為表格的需求，不需要工具庫，也不要后端實現，mark 一下。

js 導出 excel 表格

最近工作中又遇到了將表格數據導出為 excel 表格的需求，我第一時間想到的是之前我的網站上推薦過的 javascript 庫 node-xlsx，這是一個在 node.js 服務端使用的庫，之前用于電商系統導出訂單數據給運營同事，使用比較簡單，但仍需要后端實現。

需求簡單分析

這次的需求有下面幾個特點：

• 數據類型幾乎都是文本，沒有太多數字型的列
• 沒有太多需要統計或者匯總等計算結果的輸出的行
• 需要導出的數據已經在前端全部加載并展示

解決方案確定

帶著不想麻煩后端的想法，我嘗試尋找純前端實現數據導出 excel 表格的方法。找了一圈，發現效果不理想，要么太復雜，要么導出的 xlsx 文件兼容性有問題。突然一激靈，想到之前用過的數據統計應用導出的文件格式是 csv 的，稍微研究了一下，最后我把決定把導出的文件格式轉為了 csv 表格。

csv 是什么格式的文件？

csv 是一種主要以逗號為分隔符的分隔值文件格式，以純文本的形式儲存表格數據，常常用來作為不同應用程序間轉移數據使用。

csv 文件的特點：

• 用逗號作為表格列分隔符，當然也可以用其他分隔符，不過為了通用性，推薦用逗號
• 純文本格式，讀取、寫入都很簡單
• 每一行文本就是表格的一行數據
• 幾乎能被所有的表格應用支持，excel 和 wps 更是老早就支持導入 csv 文件

看到這里，相信很多開發者已經知道，只要把數據處理成符合上面格式的字符串，然后把 csv 的文件頭加上，通過 <a> 標簽下載，就完成了導出文件下載到本地的需求。

代碼實現

假設有如下表格數據：

const tableRows = [
  ['姓名'，'手機號','部門'], // 第一行就是表格表頭
  ['尤與西','131xxxx','技術部'],
  ['阮易楓','158xxxx','技術部'],
  ['廖學豐','189xxxx','技術部']
]

構造 CSV 字符：

// 構造數據字符，換行需要用\r\n
let CsvString = tableRows.map(data => data.join(',')).join('\r\n');
// 加上 CSV 文件頭標識
CsvString = 'data:application/vnd.ms-excel;charset=utf-8,\uFEFF' + encodeURIComponent(CsvString);
// 通過創建a標簽下載
const link = document.createElement('a');
link.href = CsvString;
// 對下載的文件命名
link.download = `技術部頂級員工列表.csv`;
// 模擬點擊下載
link.click();
// 移除a標簽
link.remove();

這樣就會直接從瀏覽器下載，完美完成需求。

注意事項

csv 文件默認是每一行為一條數據，如果導出表格的單元格里需要換行，則需要用雙引號包裹起來，比如構造出的 CSV 字符串：

尤與西,136xxxx,技術部,"第二小組
技術主管",001
阮易楓',158xxxx,技術部,"第三小組
技術主管",002

上面數據導出表格共2條數據，每行第4列的“小組”和“技術主管”之間的換行會保留。

另外，這種方式不支持合并單元格、設置數據類型的格式，如果輸出的表格對格式要求較高，還是老老實實用 node-xlsx 吧。

最后祝大家早點完成需求，早點下班。