vue 打印 word文档的一些探索

打印 Word 文档的一些探索

在开发中，我们经常会遇到需要将 Word 文档打印出来的需求。但是，由于浏览器对 Word 文档格式的支持不完善，因此打印 Word 文档这件事情就变得很麻烦。下面，我分享一下我在这方面的一些探索。

第一种尝试

我最初的想法是，使用预览插件预览 Word，然后打印 DOM 的方式去打印。具体步骤如下：

安装 docx-preview、jszip 和 print-js 这三个库：

npm install docx-preview
npm install jszip
npm install print-js

在代码中引入 docx-preview 并获取 Word 文件流：

const docx = require("docx-preview");
axios
  .get("/api/wt/test01", {
    responseType: "blob",//注意返回数据类型
  })
  .then((res) => {
    // 对后端返回二进制流做处理
    const blob = new Blob([res.data]);
    //加载完成后，调打印预览接口
    docx.renderAsync(blob, this.$refs.word).then(this.print(this.$refs.word));
  });
使用 print-js 将 DOM 打印出来：

import printJS from 'print-js'

print(ref, title, style, type, jsonData, borderHeadStyle, gridStyle, css) {
  printJS({
    printable: ref,
    header: title || null,
    type: type || 'html',
    headerStyle: 'font-size:6px;font-weight:600;text-align:center;padding:15px 0 10px 0;',//标题设置
    properties: jsonData || [],//json数据元
    gridHeaderStyle: borderHeadStyle || 'font-size:6px;font-weight:400;height:40px;line-height:40px;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json格式表头样式
    gridStyle: gridStyle || 'font-size:1px;font-weight:200;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json各式表哥央视
    scanStyles: false,//不适用默认样式
    repeatTableHeader: false,//打印json表头只显示在第一页
    style: style || '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}',//去除页眉页脚
    css: css || null,//css url
  })
}

但是，上面的代码存在很多问题。一是预览的 DOM 不能隐藏，隐藏后浏览器自带打印预览没有内容；二是不能完美还原原文件格式。

第二种尝试

由于第一种方法不能完美还原 Word 的格式，我想到了是不是可以在后台将 Word 转为

由于第一种方法不能完美还原 Word 的格式，我想到了是不是可以在后台将 Word 转为PDF，然后在 Vue 中渲染并打印 PDF 文件。然而，经过测试后发现也不能完美还原 Word 的格式。

最后，我们决定放弃这个方法，转而采用下载的方式。我想写这篇文章的一个目的就是想告诉大家，不要在这个问题上浪费太多时间。还有，如果你有更好的解决方法，欢迎分享。

我们之前尝试了使用 docx-preview 这个插件来预览 Word 文件，并使用 jszip 和 print-js 进行打印。然而，我们遇到了一些问题。首先，预览的 DOM 元素不能隐藏，因为如果隐藏了，浏览器自带的打印预览功能就无法正常工作。其次，即使不隐藏 DOM 元素，打印出来的结果也不能完美还原原文件的格式。

虽然微软提供了一个收费的包可以完美还原 Word 的格式，但我们并不想购买。最终，我们放弃了在浏览器中直接打印 Word 文件的方法，而是采用了下载文件的方式，将 Word 文件下载下来，再使用 Word 软件进行打印。

虽然我们没有得到我们想要的结果，但这个过程让我们学到了很多东西，也让我们更加深入地了解了打印这个功能。

ps:后来用户只想在网站中打印不想下载 同时妥协了部分格式 ,所以采用了UReport.