打印 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.