整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
pire.XLS for .NET是一款專業(yè)的 .NET Excel 組件， 它可以用在各種 .NET 框架中，包括 .NET Core、ASP.NET 和 Windows Forms 等相關(guān)的 .NET 應(yīng)用程序。Spire.XLS for .NET 提供了一個對象模型 Excel API，使開發(fā)人員可以快速地在 .NET 平臺上完成對 Excel 的各種編程操作，如根據(jù)模板創(chuàng)建新的 Excel 文檔，編輯現(xiàn)有 Excel 文檔以及對 Excel 文檔進(jìn)行轉(zhuǎn)換。
近日，Spire.XLS for .NET更新至v10.3.0，此版本主要修復(fù)了XLS轉(zhuǎn)PDF/HTML及操作文檔時出現(xiàn)的問題，點擊文末“了解更多”下載最新版。
Bug修復(fù)
此版本修復(fù)了許多轉(zhuǎn)換時的Bug問題，不如一起來回顧一下Spire.XLS的格式轉(zhuǎn)換功能有哪些吧。
Workbook workbook = new Workbook();
workbook.LoadFromFile("Test.xlsx");
//將整個工作薄保存為PDF
workbook.SaveToFile("WorkbookToPDF.pdf", Spire.Xls.FileFormat.PDF);//初始化workbook實例
Workbook workbook = new Workbook();
//加載Excel文檔
workbook.LoadFromFile("Sample.xlsx");
//獲取第一個工作表
Worksheet sheet = workbook.Worksheets[0];
//將工作表保存為圖片
sheet.SaveToImage("ExceltoImage.png", ImageFormat.Png);//初始化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 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 sample
Workbook workbook = new Workbook();
workbook.LoadFromFile("Sample.xlsx");
//獲取第一個Excel工作表
Worksheet sheet = workbook.Worksheets[0];
//保存Excel到HTML
sheet.SaveToHtml("Sample.html");//創(chuàng)建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); //轉(zhuǎn)換到SVG workbook.Worksheets[i].ToSVGStream(fs, 0, 0, 0, 0); fs.Flush(); fs.Close(); }//初始化Workbook對象
Workbook wb = new Workbook();
//加載CSV文件
wb.LoadFromFile("SampleCSVFile.csv", ",",1,1);
//將第一個工作表命名為“導(dǎo)入Excel”
wb.Worksheets[0].Name = "導(dǎo)入Excel";
//轉(zhuǎn)換為Excel文件
wb.SaveToFile("toExcel.xlsx", ExcelVersion.Version2013);于實現(xiàn)文檔在線預(yù)覽的做法，之前文章提到了的兩種實現(xiàn)方式：
1、通過將文檔轉(zhuǎn)成圖片：詳見《文檔在線預(yù)覽新版（一）通過將文件轉(zhuǎn)成圖片實現(xiàn)在線預(yù)覽功能》；
2、將文檔轉(zhuǎn)成html：詳見《文檔在線預(yù)覽新版（二）通過將文件統(tǒng)一轉(zhuǎn)成html以實現(xiàn)在線預(yù)覽》；
3、將文檔轉(zhuǎn)成pdf：詳見 《文檔在線預(yù)覽新版（三）通過將文件統(tǒng)一轉(zhuǎn)成pdf來實現(xiàn)在線預(yù)覽》；
其實除了這三種實現(xiàn)方式之外之外，還有一種常見的做法就是在統(tǒng)一都由前端通過相關(guān)的在線預(yù)覽組件來實現(xiàn)預(yù)覽
在網(wǎng)上的找了一圈實現(xiàn)方案，發(fā)現(xiàn)還挺多開源組件可以實現(xiàn)，整理了一下這些開源組件放在了下面的表格里，里面有一些是可以直接通過npm在vue中引入使用。
文檔格式 | 相關(guān)的開源組件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint（pptx） | pptxjs |
是一個 純前端的JavaScript庫，它的優(yōu)點是可以后端就實現(xiàn)對 .docx 的文件進(jìn)行在線預(yù)覽，但是缺點是 不支持.doc(劃重點)。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例：https://volodymyrbaydalka.github.io/docxjs
安裝：
npm install docx-preview -S使用效果：
Mammoth 原理是將 .docx 文檔并將其轉(zhuǎn)換為 HTML。 注意Mammoth 轉(zhuǎn)換過程中復(fù)雜樣式被忽，居中、首行縮進(jìn)等，此外同樣也只能轉(zhuǎn)換.docx文檔。
github地址：https://github.com/mwilliamson/mammoth.js
安裝：
npm install mammothpdf.js是一款非常優(yōu)秀的pdf解析工具，其實火狐瀏覽器內(nèi)核自帶pdf預(yù)覽解析器就是pdf.js這個解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺可以看到源碼內(nèi)容。
官網(wǎng)地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例：https://mozilla.github.io/pdf.js/web/viewer.html
使用效果：
PDFObject.js - 將PDF嵌入到一個div內(nèi)，而不是占據(jù)整個頁面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過配置PDF.js來實現(xiàn)
官網(wǎng)地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
實現(xiàn)效果：
Vue-pdf是通過Vue下基礎(chǔ)基于 pdf.js 組件實現(xiàn)PDF文件的展示，操作和生成的組件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例：https://jsfiddle.net/fossfiddler/5k4ptmqg/145/
安裝：
npm install --save vue-pdf實現(xiàn)效果：
iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內(nèi)嵌在這三個HTML標(biāo)簽內(nèi)，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當(dāng)于一個新的頁面內(nèi)嵌在當(dāng)前頁面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>實現(xiàn)效果：
js-xlsx是sheetJS出品的讀取和導(dǎo)出各種ecxel的工具庫，功能十分強(qiáng)大。
xlsx官方文檔：https://www.npmjs.com/package/xlsx
github倉庫： https://github.com/SheetJS/sheetjs
安裝：
npm install xlsxjs-xlsx可以用二進(jìn)制流方式讀取得到整份excel表格對象
let workbook = XLSX.read(data, { type: "array" }); //表格對象
let sheetNames = workbook.SheetNames; //獲取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]]; //取第一張表獲取表格數(shù)據(jù)后再調(diào)用js-xlsx提供的方法，直接將表格數(shù)據(jù)轉(zhuǎn)換為html代碼，再將html代碼渲染到指定容器就完成了
let html = XLSX.utils.sheet_to_html(worksheet);實現(xiàn)效果：
基于 canvas 來渲染表格，支持表格過濾、數(shù)據(jù)編輯、自定義操作菜單、大數(shù)據(jù)場景優(yōu)化、主題樣式修改
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
handsontable基于 DOM 元素來渲染表格，功能強(qiáng)大，canvas-datagrid` 支持的功能它都支持，并且主題樣式擴(kuò)展更方便
官網(wǎng)地址：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/vueDemo示例：https://handsontable.com/demo
實現(xiàn)效果：
基于Jquery 表格插件DataTables的一個表格插件，還在用Jquery 可以以考慮這個
官網(wǎng)地址：https://www.datatables.net
安裝：
官網(wǎng)下載地址，在你的項目中使用 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
} );PPTXJS是jquery的一個插件，她的主要功能是實現(xiàn)pptx轉(zhuǎn)html，用于在線進(jìn)行展示
官網(wǎng)地址：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>
實現(xiàn)效果：
本文主要介紹了word、excel、pdf、ppt等文件純前端實現(xiàn)在線預(yù)覽的方式，具體實現(xiàn)可以是：
前端通過判斷不同文件類型的使用對應(yīng)的在線預(yù)覽組件進(jìn)行在線預(yù)覽。 因為不同類型的在線預(yù)覽組件不一樣在使用時預(yù)覽界面會存在差異，如果需要做的完善一點 最好是把所有用到的組件都統(tǒng)一封裝的一個在線預(yù)覽的UI界面中。
從本文的測試情況來看前端實現(xiàn)預(yù)覽最好的效果還是PDF，不會出現(xiàn)一些文字錯亂和亂碼的問題，這樣能保留文件的一些樣式的效果，同時前端也只用支持一種文件格式的預(yù)覽，工作量也能大大降低。
以上就是使用js前端實現(xiàn)word、excel、pdf、ppt等文件在線預(yù)覽的方式的全部內(nèi)容，感謝大家的閱讀！
近實現(xiàn)的導(dǎo)出數(shù)據(jù)為表格的需求，不需要工具庫，也不要后端實現(xiàn)，mark 一下。
最近工作中又遇到了將表格數(shù)據(jù)導(dǎo)出為 excel 表格的需求，我第一時間想到的是之前我的網(wǎng)站上推薦過的 javascript 庫 node-xlsx，這是一個在 node.js 服務(wù)端使用的庫，之前用于電商系統(tǒng)導(dǎo)出訂單數(shù)據(jù)給運營同事，使用比較簡單，但仍需要后端實現(xiàn)。
這次的需求有下面幾個特點：
帶著不想麻煩后端的想法，我嘗試尋找純前端實現(xiàn)數(shù)據(jù)導(dǎo)出 excel 表格的方法。找了一圈，發(fā)現(xiàn)效果不理想，要么太復(fù)雜，要么導(dǎo)出的 xlsx 文件兼容性有問題。突然一激靈，想到之前用過的數(shù)據(jù)統(tǒng)計應(yīng)用導(dǎo)出的文件格式是 csv 的，稍微研究了一下，最后我把決定把導(dǎo)出的文件格式轉(zhuǎn)為了 csv 表格。
csv 是一種主要以逗號為分隔符的分隔值文件格式，以純文本的形式儲存表格數(shù)據(jù)，常常用來作為不同應(yīng)用程序間轉(zhuǎn)移數(shù)據(jù)使用。
看到這里，相信很多開發(fā)者已經(jīng)知道，只要把數(shù)據(jù)處理成符合上面格式的字符串，然后把 csv 的文件頭加上，通過 <a> 標(biāo)簽下載，就完成了導(dǎo)出文件下載到本地的需求。
假設(shè)有如下表格數(shù)據(jù)：
const tableRows = [
['姓名'，'手機(jī)號','部門'], // 第一行就是表格表頭
['尤與西','131xxxx','技術(shù)部'],
['阮易楓','158xxxx','技術(shù)部'],
['廖學(xué)豐','189xxxx','技術(shù)部']
]構(gòu)造 CSV 字符：
// 構(gòu)造數(shù)據(jù)字符，換行需要用\r\n
let CsvString = tableRows.map(data => data.join(',')).join('\r\n');
// 加上 CSV 文件頭標(biāo)識
CsvString = 'data:application/vnd.ms-excel;charset=utf-8,\uFEFF' + encodeURIComponent(CsvString);
// 通過創(chuàng)建a標(biāo)簽下載
const link = document.createElement('a');
link.href = CsvString;
// 對下載的文件命名
link.download = `技術(shù)部頂級員工列表.csv`;
// 模擬點擊下載
link.click();
// 移除a標(biāo)簽
link.remove();這樣就會直接從瀏覽器下載，完美完成需求。
csv 文件默認(rèn)是每一行為一條數(shù)據(jù)，如果導(dǎo)出表格的單元格里需要換行，則需要用雙引號包裹起來，比如構(gòu)造出的 CSV 字符串：
尤與西,136xxxx,技術(shù)部,"第二小組
技術(shù)主管",001
阮易楓',158xxxx,技術(shù)部,"第三小組
技術(shù)主管",002上面數(shù)據(jù)導(dǎo)出表格共2條數(shù)據(jù)，每行第4列的“小組”和“技術(shù)主管”之間的換行會保留。
另外，這種方式不支持合并單元格、設(shè)置數(shù)據(jù)類型的格式，如果輸出的表格對格式要求較高，還是老老實實用 node-xlsx 吧。
最后祝大家早點完成需求，早點下班。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
