用JavaScript 透过iframe 列印baes64 的PDF web

admin 4月前 103

在一开始很直觉得直接使用Data URL 的方式把base64 字串放到iframe 里面,很OK 的呈现出来了

<iframe src="data:application/pdf;base64,{data}" />

然后在透过iframe 里面的window 去print PDF

iframe.contentWindow.print()

但是遇到了一个不在预期内的问题

Uncaught DOMException: Blocked a frame with origin "https://localhost" from accessing a cross-origin frame.

很明显的是CORS 的问题,没有想过Data URL 会有CORS 的问题,所以只能换别的方式,所以Google 了一下发现需要先转成Blob 物件在透过URL 物件去createObjectURL,这样产生出来的URL就会是在同一个domain 里面的URL,具体的程式码如下:

const data =
  "JVBERi0xLjMKJf////8KNiAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDEgMCBSCi9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyA0IDAgUgovUmVzb3VyY2VzIDUgMCBSCj4+CmVuZG9iago1IDAgb2JqCjw8Ci9Qcm9jU2V0IFsvUERGIC9UZXh0IC9JbWFnZUIgL0ltYWdlQyAvSW1hZ2VJXQovRm9udCA8PAovRjEgNyAwIFIKPj4KPj4KZW5kb2JqCjQgMCBvYmoKPDwKL0xlbmd0aCAxMDgKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnicZYyxCsMwEEP3+wr9QFvrYvtSCB4CzZCtcFvpZPCWof+/9IZs4YEk3iAiBTdG2FPRD/kJL271UxKmMPI+zRl+yGMjqPAhnyXPtdQeDE0NOWEp1jBF12Ha4rDE7DUrG9IXvsvL5S1/qAkaqQplbmRzdHJlYW0KZW5kb2JqCjkgMCBvYmoKKAAAAAAAACkKZW5kb2JqCjEwIDAgb2JqCigAAAAAAAApCmVuZG9iagoxMSAwIG9iagooRDoyMDE5MDkyNjAzNDMxOFopCmVuZG9iago4IDAgb2JqCjw8Ci9Qcm9kdWNlciA5IDAgUgovQ3JlYXRvciAxMCAwIFIKL0NyZWF0aW9uRGF0ZSAxMSAwIFIKPj4KZW5kb2JqCjcgMCBvYmoKPDwKL1R5cGUgL0ZvbnQKL0Jhc2VGb250IC9IZWx2ZXRpY2EKL1N1YnR5cGUgL1R5cGUxCi9FbmNvZGluZyAvV2luQW5zaUVuY29kaW5nCj4+CmVuZG9iagozIDAgb2JqCjw8Cj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9DYXRhbG9nCi9QYWdlcyAxIDAgUgo+PgplbmRvYmoKMSAwIG9iago8PAovVHlwZSAvUGFnZXMKL0NvdW50IDEKL0tpZHMgWzYgMCBSXQo+PgplbmRvYmoKeHJlZgowIDEyCjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDcxNCAwMDAwMCBuIAowMDAwMDAwNjY1IDAwMDAwIG4gCjAwMDAwMDA2NDQgMDAwMDAgbiAKMDAwMDAwMDIwOCAwMDAwMCBuIAowMDAwMDAwMTE5IDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMDU0NyAwMDAwMCBuIAowMDAwMDAwNDczIDAwMDAwIG4gCjAwMDAwMDAzODggMDAwMDAgbiAKMDAwMDAwMDQxMiAwMDAwMCBuIAowMDAwMDAwNDM3IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgMTIKL1Jvb3QgMiAwIFIKL0luZm8gOCAwIFIKL0lEIFs8MzU3YjZkMjUyNjlmN2RjNDA2YTQ4ZDllOWE4NWRjYzY+IDwzNTdiNmQyNTI2OWY3ZGM0MDZhNDhkOWU5YTg1ZGNjNj5dCj4+CnN0YXJ0eHJlZgo3NzEKJSVFT0YK"
const bytesArray = Uint8Array.from(atob(data), c => c.charCodeAt(0))
const pdfBlob = new window.Blob([bytesArray], { type: "application/pdf" })
iframe.src = window.URL.createObjectURL(pdfBlob)
iframe.contentWindow.print()

最后产出来的URL 会像是:

blob:https://localhost/71907d8b-46f5-4847-9bfb-c52ac1a0473d

就可以解决CORS 的问题,也就可以的透过JavaScript 正常列印了


少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:Go语言整型(整数类型)
下一篇:Deepin linux搭建php开发环境
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回