js解决pdf使用iframe打印报跨域错误问题的方法示例

本文介绍了如何在JavaScript中处理PDF跨域问题,通过将PDF转换为Blob并创建一个隐藏的iframe,实现从非同源URL安全地调用iframe的打印功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

教程下载地址: 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/


报错如下:

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
在Vue应用中使用iframe预览PDF文件时,如果PDF位于另一个名下,可能会遇到限制。为了处理这个问题,你需要配置服务器端允许该URL访问,或者在浏览器端采取一些技巧来解决。 1. **服务器端设置**: - 如果你有控制服务器权限,可以在服务器上设置CORS(Cross-Origin Resource Sharing),即通过HTTP响应头`Access-Control-Allow-Origin`指定允许哪些源访问资源。 ```javascript // Node.js express示例 res.setHeader('Access-Control-Allow-Origin', 'http://yourdomain.com'); ``` 2. **JSONP(JSON with Padding)**: 使用JSONP可以在浏览器支持同源策略的情况下从其他请求数据,不过这种方法适用于GET请求。将PDF内容作为JSON返回,并包装在一个函数调用内。 3. ** CORS Preflight 请求(OPTIONS)**: 对于POST、PUT等请求,通常需要先发送一个`OPTIONS`请求来检查是否允许。可以在这个请求中返回`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。 4. **vue-cli创建的项目**: 在`main.js`或其他合适的中间件文件中添加CORS处理。例如,如果你使用axios库,可以配置全局代理: ```javascript import axios from 'axios'; axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 这行很重要 const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, withCredentials: true, // 是否带cookie transformRequest: [function (data) { // 对请求数据做转换 }], transformResponse: [function (data) { // 对响应数据做转换 }], headers: {'Content-Type': 'application/json' /*默认值*/} }); window.axios = instance; ``` 记得测试设置是否生效,因为某些浏览器在初次加载时会缓存错误状态,刷新页面或清除缓存可能会看到效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值