项目是用vue写的,vue 有打印pdf 的插件,但是考虑版本兼容的问题,个人觉得处理起来太麻烦,还是觉得可以采取原生的js处理即可。

思路也简单:

后端返回文件流,在请求头记得要转换好对应的格式 responseType: 'blob'

export const getPdfUrl = (params) => {
  return axios({
    url: process.env.INV_APP_NAME +'/invInvoiceManageInfo/getPdfUrl',
    method: 'get',
    params,
    responseType: 'blob'
  })
}

 获取到文本流后,即可用 iframe  去处理打印。

题外话,获取到文本流后,即可处理下载文本流到本地。

  记得要处理好pdf 的分页,要保留适应分页的问题

        let res = await this.reqPrintFn(row)
        let url = URL.createObjectURL(res) // 后端返回的文本流
        var iframe = document.createElement('iframe')
        iframe.setAttribute('id', 'printPDF') 
        iframe.setAttribute('name', 'printPDF') // 不可少
        iframe.style.frameborder = 'no'
        iframe.style.display = 'none'
        iframe.style.pageBreakBefore = 'always' // 打印保留分页
        iframe.src = url 
        document.body.appendChild(iframe)
        setTimeout(() => {
          document.getElementById('printPDF').contentWindow.print()
        }, 1000) 
        window.URL.revokeObjectURL(iframe.src) 

思路来源 react项目利用iframe显示pdf文件并打印 - 掘金 (juejin.cn)

 

Logo

前往低代码交流专区

更多推荐