前端使用 docx-preview 和 window.print() 预览打印 word 文档

前端使用 docx-preview 和 window.print() 预览打印 word 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-dialog title="文稿" :visible.sync="visible">
  xxxxxxxxxxxxxxxxxxxxxxxxx
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="confirm('download')">下载</el-button>
    <el-button @click="confirm('preview')">预览</el-button>
  </div>
  <el-dialog fullscreen="" width="30%" title="预览" :visible.sync="innerVisible" append-to-body="">
    <div ref="file" class="preview print-content"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm('print')">打印</el-button>
    </div>
  </el-dialog>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { api } from '@/api';
import { renderAsync } from 'docx-preview';
function downloadBlob(blob, fileName) {
  if (!fileName) {
    alert('文件名不正确');
    return;
  }
  // FileReader主要用于将文件内容读入内存
  var reader = new FileReader();
  reader.readAsDataURL(blob);
  // onload当读取操作成功完成时调用
  reader.onload = function (e) {
    var a = document.createElement('a');
    a.download = fileName;
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}
export default {
  data() {
    return { innerVisible: false, visible: false, radio: null, form: {} };
  },
  methods: {
    show(form) {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
    confirm(type) {
        api.getPrintFile()
          .then(res =&gt; {
            console.log('这是一个Blob对象',res);
            if (res &amp;&amp; res.size) {
              const fileName = Math.random();
              if (type == 'download') {
                downloadBlob(res, fileName + '.docx');
                this.hide();
              } else if (type == 'preview') {
                this.innerVisible = true;
                this.$nextTick(() =&gt; {
                  renderAsync(
                    res,
                    this.$refs.file,
                    null,
                    {
                      className: 'docx', // 默认和文档样式类的类名/前缀
                      inWrapper: true, // 启用围绕文档内容渲染包装器
                      ignoreWidth: true, // 禁止页面渲染宽度
                      ignoreHeight: true, // 禁止页面渲染高度
                      ignoreFonts: true, // 禁止字体渲染
                      breakPages: true, // 在分页符上启用分页
                      ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
                      experimental: true, //启用实验性功能（制表符停止计算）
                      trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
                      debug: false, // 启用额外的日志记录
                    },
                  );
                });
              } else if (type == 'print') {
                const printHtml = document.querySelector('.print-content').innerHTML; // 需要打印的内容
                const newWin = window.open('', 'newwindow');
                newWin.document.write(`<title>${this.contractTemplate}</title>`);
                // newWin.document.write(
                //   ` <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">`,
                // );
                // newWin.document.write(`   <style>${printCss}</style>`);
                newWin.document.write(``);
                newWin.document.write(printHtml);
                newWin.document.write('');
                // newWin.document.getElementsByTagName('body')[0].style.zoom = 0.8;
                newWin.print();
                newWin.close(); // 打印完成后关闭
              } else {
                this.$message.warning('type error');
              }
            } else {
              this.$message.warning('下载出错，请查看接口返回值');
              console.warn(res);
            }
          });

    },
  },
};
编辑文章✏