前端页面导出word

最近的项目中，需要把vue中的部分内容导出为word形式，之前没有做过这方面的，特记录，由于是初学，所以整理了此模板。

引入js库
首先，您需要在页面中引入js库，例如docxtemplater或html-docx-js。这些库可以将HTML转换为Word文档。

<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.9.1/docxtemplater.js"></script>
or
npm install docxtemplater -S

或者

<script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js"></script>
or 
npm install html-docx -S

2. 编写导出代码

接下来，您需要编写导出代码。以下是一个使用docxtemplater库的示例代码：

// 导入docxtemplater
import docxtemplater from "docxtemplater";

// 获取HTML内容
var html = document.getElementById('content').innerHTML;

// 创建docxtemplater实例
var doc = new docxtemplater();

// 将HTML转换为Word文档
doc.loadZip(new JSZip(html));

// 下载Word文档
doc.render();
var out = doc.getZip().generate({
  type: 'blob'
});

或者，以下是一个使用html-docx-js库的示例代码：

// 导入html-docx
import htmlDocx from 'html-docx-js/dist/html-docx';

// 获取HTML内容
var html = document.getElementById('content').innerHTML;

// 将HTML转换为Word文档
var doc = htmlDocx.asBlob(html);

3. 下载Word文档
最后，您需要将Word文档下载到本地。您可以使用FileSaver.js库来实现这一点。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
or
npm install file-saver -S

然后，您可以使用以下代码将Word文档下载到本地：

// 导入 saveAs
import { saveAs }  from "file-saver";

saveAs(doc, 'fileName.docx');

使用js库将页面导出为Word文档是一种常用的方法。您可以使用docxtemplater或html-docx-js库将HTML转换为Word文档，并使用FileSaver.js库将文档下载

• 本文作者： 新伢
• 本文链接： http://example.com/2022/08/08/前端页面导出word/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！