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修復
此版本修復了許多轉換時的Bug問題,不如一起來回顧一下Spire.XLS的格式轉換功能有哪些吧。
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");
//創建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(); }
//初始化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);
于實現文檔在線預覽的做法,之前文章提到了的兩種實現方式:
1、通過將文檔轉成圖片:詳見《文檔在線預覽新版(一)通過將文件轉成圖片實現在線預覽功能》;
2、將文檔轉成html:詳見《文檔在線預覽新版(二)通過將文件統一轉成html以實現在線預覽》;
3、將文檔轉成pdf:詳見 《文檔在線預覽新版(三)通過將文件統一轉成pdf來實現在線預覽》;
其實除了這三種實現方式之外之外,還有一種常見的做法就是在統一都由前端通過相關的在線預覽組件來實現預覽
在網上的找了一圈實現方案,發現還挺多開源組件可以實現,整理了一下這些開源組件放在了下面的表格里,里面有一些是可以直接通過npm在vue中引入使用。
文檔格式 | 相關的開源組件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint(pptx) | pptxjs |
是一個 純前端的JavaScript庫,它的優點是可以后端就實現對 .docx 的文件進行在線預覽,但是缺點是 不支持.doc(劃重點)。
github地址:https://github.com/VolodymyrBaydalka/docxjs
demo示例:https://volodymyrbaydalka.github.io/docxjs
安裝:
npm install docx-preview -S
使用效果:
Mammoth 原理是將 .docx 文檔并將其轉換為 HTML。 注意Mammoth 轉換過程中復雜樣式被忽,居中、首行縮進等,此外同樣也只能轉換.docx文檔。
github地址:https://github.com/mwilliamson/mammoth.js
安裝:
npm install mammoth
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
使用效果:
PDFObject.js - 將PDF嵌入到一個div內,而不是占據整個頁面,要求瀏覽器支持顯示PDF(主流瀏覽器都支持),如果瀏覽器不支持,也可通過配置PDF.js來實現
官網地址: https://pdfobject.com/
github地址:https://github.com/pipwerks/PDFObject
實現效果:
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
實現效果:
iframe / object / embed 使用方法和效果都同理,即將 pdf 作為插件內嵌在這三個HTML標簽內,以下用 iframe 為例,效果就如同直接用鏈接打開 pdf 文件是一樣的,相當于一個新的頁面內嵌在當前頁面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
實現效果:
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);
實現效果:
基于 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
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
實現效果:
基于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
} );
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等文件純前端實現在線預覽的方式,具體實現可以是:
前端通過判斷不同文件類型的使用對應的在線預覽組件進行在線預覽。 因為不同類型的在線預覽組件不一樣在使用時預覽界面會存在差異,如果需要做的完善一點 最好是把所有用到的組件都統一封裝的一個在線預覽的UI界面中。
從本文的測試情況來看前端實現預覽最好的效果還是PDF,不會出現一些文字錯亂和亂碼的問題,這樣能保留文件的一些樣式的效果,同時前端也只用支持一種文件格式的預覽,工作量也能大大降低。
以上就是使用js前端實現word、excel、pdf、ppt等文件在線預覽的方式的全部內容,感謝大家的閱讀!
近實現的導出數據為表格的需求,不需要工具庫,也不要后端實現,mark 一下。
最近工作中又遇到了將表格數據導出為 excel 表格的需求,我第一時間想到的是之前我的網站上推薦過的 javascript 庫 node-xlsx,這是一個在 node.js 服務端使用的庫,之前用于電商系統導出訂單數據給運營同事,使用比較簡單,但仍需要后端實現。
這次的需求有下面幾個特點:
帶著不想麻煩后端的想法,我嘗試尋找純前端實現數據導出 excel 表格的方法。找了一圈,發現效果不理想,要么太復雜,要么導出的 xlsx 文件兼容性有問題。突然一激靈,想到之前用過的數據統計應用導出的文件格式是 csv 的,稍微研究了一下,最后我把決定把導出的文件格式轉為了 csv 表格。
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 吧。
最后祝大家早點完成需求,早點下班。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。