关尔先生·南山桥

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

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

```javascript 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 => { console.log('这是一个Blob对象',res); if (res && res.size) { const fileName = Math.random(); if (type == 'download') { downloadBlob(res, fileName + '.docx'); this.hide(); } else if (type == 'preview') { this.innerVisible = true; this.$nextTick(() => { 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(`${this.contractTemplate}`); // newWin.document.write( // ` `, // ); // newWin.document.write(` `); 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); } }); }, }, }; ```