工作记录-vue3获取后端word文档流，预览展示及打印预览

最新推荐文章于 2025-03-26 17:10:01 发布

weixin_46090311

最新推荐文章于 2025-03-26 17:10:01 发布

阅读量790

点赞数 3

文章标签： word vue

本文链接：https://blog.youkuaiyun.com/weixin_46090311/article/details/144529343

版权

使用插件：

docx-preview 用于展示word文档

vue3-print-nb 用于打印预览

docx-preview的下载

npm install docx-preview

vue3-print-nb的下载及使用

npm install vue3-print-nb 

//在main.js中引入
import print from 'vue3-print-nb'


app.use(print);

展示页面引入docx-preview

**id是打印的关键，关于的元素一定要有id**

<template>
    <div>
      <div>
        <el-button type="primary" v-print="onPrintWord">打印</el-button>
      </div>
      <div ref="refWord" id="printView" class="print-area" style="height: 100%;" />
    </div>
</template>


<script setup>
import { renderAsync } from 'docx-preview'

//打印-预览
const wordUrl = ref()
const wordTitle = ref('')
const refWord = ref(null)
const onPrint = (row) => {
//exportApply 是请求后端文件流的接口
  exportApply(row.id).then(res => {
    const blob = new Blob([res.data]);
    wordTitle.value = decodeURI(res.headers['content-disposition'].split('filename=')[1])
    wordUrl.value = blob
    return blob
  }).then((blob) => {
    const options = {
      className: 'docx', // 默认和文档样式类的类名/前缀
      inWrapper: true, //  启用围绕文档内容渲染包装器
      ignoreWidth: false, //  禁止页面渲染宽度
      ignoreHeight: false, //  禁止页面渲染高度
      ignoreFonts: false, //  禁止字体渲染
      breakPages: true, //  在分页符上启用分页
      ignoreLastRenderedPageBreak: true, //  禁用lastRenderedPageBreak元素的分页
      experimental: false, //  启用实验性功能（制表符停止计算）
      trimXmlDeclaration: true, //   如果为真，xml声明将在解析之前从xml文档中删除
      debug: false, //  启用额外的日志记录
      useBase64URL: true, // 如果为true，图片、字体等将被转换为base 64 URL，否则使用URL.createObjectURL
      useMathMLPolyfill: false, //  包括用于 chrome、edge 等的 MathML polyfill。
      showChanges: false // 启用文档更改（插入/删除）的实验性呈现
    }
    renderAsync(blob, refWord.value, null, options)
  })
}

const onPrintWord = ref({
  id: 'printView', // 打印区域的唯一的id属性
  popTitle: '', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
  extraHead: '', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
  previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
  zIndex: 21000, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback(that) {
    console.log('正在加载预览窗口！');
    console.log(that.msg, this);
  }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
  previewOpenCallback() {
    console.log('已经加载完预览窗口，预览打开了！');
  }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
  beforeOpenCallback() {
    console.log('开始打印之前！');
  }, // 开始打印之前的callback
  openCallback() {
    console.log('执行打印了！');
    // 修改保存为pdf时，文件名称
    document.title = wordTitle.value.split('.')[0];
  }, // 调用打印时的callback
  closeCallback() {
    console.log('关闭了打印工具！');
    document.title = '危险源智能预警系统';
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log('点击v-print绑定的按钮了！');
  },
});
//end
</script>