vue 请求word文档流并打印预览

一、在线预览word文档

Vue在线预览word
1、安装插件

npm install docx-preview

npm install jszip

2、请求接口预览

由于不需要在网页上显示，所有宽高设置为0

  <div ref="word" style="width:0;height:0"></div>

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));
        });

二、打印预览word文档

打印 print-js

[【Vue】如何实现打印功能：Printjs插件]
(https://blog.csdn.net/qi8023for/article/details/124346106)
1、安装插件

npm install print-js

2、代码封装

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
       })