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 吧。

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