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

最近工作中遇到了一个需求，就是前端选择表格中的某一条数据去请求后端接口，后端返回的是一个PDF文件的下载地址，但是需求不希望用户下载下来再去打印，而是直接预览展示，然后就能打印。
一开始按照网上的方式去操作，但是每一次浏览器直接就下载了下来，后面一看响应头，原来后端的Content-type设置成了如图所示，直接触发了浏览器的下载。

 怎么办呢？于是就想到了以下两种方案，两种方案都是再一次去请求返回的地址，只不过前端改成了用二进制Blob（responseType: 'blob'），获取原始二进制数据
方案一如下图所示：
其中的data为要传入的地址，然后将拿到的结果创建一个Blob对象，并重新指定其MIME类型为{ type: 'application/pdf '}，这样就不会再触发浏览器的下载功能。接着使用URL.createObjectURL()生成临时访问地址，通过window.open()的方式在新窗口打开预览，等待加载后自动打印。

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

1. Access-Control-Allow-Origin: *
3. Access-Control-Allow-Methods: GET

复制代码

方案二如下图所示：
创建一个隐藏的iframe标签src设置为pdf地址；前端通过获取隐藏的iframe标签的id来实现打印指定内容；

附上具体代码：

1. async batchPrintReturn(data) {
2.       axios.get(data,{responseType: 'blob'}).then(res => { // 以二进制Blob格式接收
3.         console.log('res>', res)
4.         const blob = new Blob([res.data], { type: 'application/pdf' }); // 创建Blob对象并指定新的MIME类型
5.         // 方案一
6.         const objectUrl = URL.createObjectURL(blob); // 生成临时URL
7.         const previewWindow = window.open(objectUrl, '_blank'); // 打开新窗口预览
8.         previewWindow.onload = function() { // 等待加载后自动打印
9.           previewWindow.print();
10.         };
11.         // 方案二
12.         var date = (new Date()).getTime()
13.         var ifr = document.createElement('iframe')
14.         ifr.style.frameborder = 'no'
15.         ifr.style.display = 'none'
16.         ifr.style.pageBreakBefore = 'always'
17.         ifr.setAttribute('id', 'printPdf' + date)
18.         ifr.setAttribute('name', 'printPdf' + date)
19.         ifr.src = window.URL.createObjectURL(blob)
20.         document.body.appendChild(ifr)
21.         this.doPrint('printPdf' + date)
22.         window.URL.revokeObjectURL(ifr.src) // 释放URL 对象
23.       })
24.     },
25.     doPrint(val) {
26.       var ordonnance = document.getElementById(val).contentWindow
27.       setTimeout(() => {
28.         ordonnance.print()
29.       }, 100)
30.     },

复制代码

 
 
获取原始二进制数据
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！