使用vue2实现打印在线word文件,文件流形式打印在线word,预览打印

最新推荐文章于 2024-04-01 15:09:13 发布

栗子One

最新推荐文章于 2024-04-01 15:09:13 发布

阅读量2.1k

点赞数

分类专栏：可能以后还会用到文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Onelizi/article/details/129240907

版权

可能以后还会用到专栏收录该内容

15 篇文章 1 订阅

订阅专栏

需要使用的三个插件

docx-preview (npm install docx-preview) 安装
jszip (npm install jszip)安装
print-js (npm install print-js)安装

html部分

<div ref="word" class="print-main"></div>

js部分

import printJS from 'print-js'



methods:{

downFile(url, parameter) {
  return axios({
    url: url,
    params: parameter,
    method: 'get',
    responseType: 'blob'
  })
}

    async handlePrint({ printFile }) {
      try {
        this.focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500) //聚焦监听关闭打印
        this.hide = this.$message.loading('加载中..', 0)
        const docx = require('docx-preview')
        const blob = await this.downFile(printFile) //获取文件流
        docx
          .renderAsync(
            blob, //Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
            this.$refs.word, // HTMLElement 渲染文档内容的元素
          )
          .then(
            setTimeout(() => {
              this.print(document.getElementsByClassName('docx')[0]) //需要打印的div
              setTimeout(this.hide) //关闭加载中
            }, 1000)
          )
      } catch (e) {
        setTimeout(this.hide) //关闭加载中
        console.log(e)
      }
    },
    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;size: a4;margin: 0cm 1cm ;}', //去除页眉页脚,A4纸
        css: css || null, //css url
        onPrintDialogClose: () => {
          this.$nextTick(() => {
            clearInterval(this.focuser)
            console.log('打印窗口关闭了')
            // 删除打印元素
            var parentElement = this.$refs.word
            while (parentElement.firstChild) {
              parentElement.removeChild(parentElement.firstChild)
            }
          })
        }
      })
    },
}

css部分

.print-main {
  position: fixed;
  top: -10000px;  //不在页面上显示
  /deep/.docx-wrapper {
    background: none;
  }
  /deep/.docx-wrapper > section.docx {
    margin-bottom: 0;
  }
}