js解决pdf使用iframe打印报跨域错误问题

报错如下:

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);
  })
}
相关推荐
蓝倾27 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong32 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹34 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982434 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户75794199497034 分钟前
基于JavaScript的简易Git
javascript
WaiterL35 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason37 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77838 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟1 小时前
让对象保持定义的顺序来排列
前端