js解决pdf使用iframe打印报跨域错误问题的方法示例
作者：舜岳
这篇文章主要给大家介绍了关于js解决pdf使用iframe打印报跨域错误问题的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下
报错如下：
Uncaught DOMException: Failed to read a named property ‘print’ from ‘Window’: Blocked a frame with origin “https://xxxx.com” from accessing a cross-origin frame.
at iframe.onload (:10:26)
解决方法：
把 pdf 转 blob 二进制数据， 通过 createObjectURL 生成本地对象 url, 在创建 iframe 调用打印接口
printPDF()
function printPDF() {
fetch('https://xxxxx.com/xxxx.pdf')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob(); // 获取二进制数据
})
.then(blobData => {
// 替换这里的 PDF_URL 为你要打印的 PDF 文件链接
const PDF_URL = URL.createObjectURL(blobData);
// 创建一个隐藏的 iframe 元素
const iframe = document.createElement('iframe');
// 等待 PDF 加载完成后进行打印
iframe.onload = function() {
iframe.contentWindow.print();
};
iframe.style.display = 'none';
iframe.src = PDF_URL;
// 将 iframe 添加到页面中
document.body.appendChild(iframe);
})
}附：iframe打印pdf跨域问题，使用blob流转为同源
<iframe :src="pdfUrl2" width="100%" height="700px" id="printMe" hidden></iframe>
<iframe :src="pdfUrl" width="100%" height="700px"></iframe>
import axios from 'axios'
axios({
method: 'get',
url: this.pdfUrl,
responseType: 'blob'
})
.then(response => {
this.pdfUrl2= window.URL.createObjectURL(response.data)
setTimeout(() => {
document.getElementById('printMe').contentWindow.print();
},2000)
})
.catch(function(error) {
console.log(error)
})总结
到此这篇关于js解决pdf使用iframe打印报跨域错误问题的文章就介绍到这了,更多相关js pdf用iframe打印报跨域错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！