前端预览和打印PDF的两种方式

最近工作中遇到了一个需求,就是前端选择表格中的某一条数据去请求后端接口,后端返回的是一个PDF文件的下载地址,但是需求不希望用户下载下来再去打印,而是直接预览展示,然后就能打印。

一开始按照网上的方式去操作,但是每一次浏览器直接就下载了下来,后面一看响应头,原来后端的Content-type设置成了如图所示,直接触发了浏览器的下载。

怎么办呢?于是就想到了以下两种方案,两种方案都是再一次去请求返回的地址,只不过前端改成了用二进制Blob(responseType: 'blob'),获取原始二进制数据

方案一如下图所示:

其中的data为要传入的地址,然后将拿到的结果创建一个Blob对象,并重新指定其MIME类型为{ type: 'application/pdf '},这样就不会再触发浏览器的下载功能。接着使用URL.createObjectURL()生成临时访问地址,通过window.open()的方式在新窗口打开预览,等待加载后自动打印。

但是这种方案要确保后端设置了如下的CORS头,这种方案兼容所有现代浏览器(Chrome/Firefox/Edge/Safari)

复制代码
Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: GET

方案二如下图所示:

创建一个隐藏的iframe标签src设置为pdf地址;前端通过获取隐藏的iframe标签的id来实现打印指定内容;

附上具体代码:

复制代码
 async batchPrintReturn(data) {
      axios.get(data,{responseType: 'blob'}).then(res => { // 以二进制Blob格式接收
        console.log('res>', res)
        const blob = new Blob([res.data], { type: 'application/pdf' }); // 创建Blob对象并指定新的MIME类型
        // 方案一
        const objectUrl = URL.createObjectURL(blob); // 生成临时URL
        const previewWindow = window.open(objectUrl, '_blank'); // 打开新窗口预览
        previewWindow.onload = function() { // 等待加载后自动打印
          previewWindow.print();
        };
        // 方案二
        var date = (new Date()).getTime()
        var ifr = document.createElement('iframe')
        ifr.style.frameborder = 'no'
        ifr.style.display = 'none'
        ifr.style.pageBreakBefore = 'always'
        ifr.setAttribute('id', 'printPdf' + date)
        ifr.setAttribute('name', 'printPdf' + date)
        ifr.src = window.URL.createObjectURL(blob)
        document.body.appendChild(ifr)
        this.doPrint('printPdf' + date)
        window.URL.revokeObjectURL(ifr.src) // 释放URL 对象
      })
    },
    doPrint(val) {
      var ordonnance = document.getElementById(val).contentWindow
      setTimeout(() => {
        ordonnance.print()
      }, 100)
    },

获取原始二进制数据

相关推荐
lumi.9 分钟前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3
前端无涯10 分钟前
uniapp跨平台开发---uni.request返回int数字过长精度丢失
javascript·uni-app
liangshanbo12153 小时前
Speculation Rules API
前端·javascript·html
石国旺3 小时前
前端javascript在线生成excel,word模板-通用场景(免费)
前端·javascript·excel
Jenna的海糖3 小时前
Vue 项目首屏加载速度优化
前端·javascript·vue.js
华仔啊3 小时前
为什么现代 Node 后端都选 NestJS + TypeScript?这组合真香了
javascript·后端
前端梭哈攻城狮3 小时前
js计算精度溢出,自定义加减乘除类
前端·javascript·算法
子兮曰3 小时前
🚀 震惊!这20个现代JavaScript API,让90%的前端开发者直呼"相见恨晚"!
javascript·api
冰糖雪梨dd4 小时前
vue在函数内部调用onMounted
前端·javascript·vue.js
CC__xy4 小时前
《ArkUI 记账本开发:状态管理与数据持久化实现》
java·前端·javascript