Safari中打开text/html Blob新标签页并打印异常问题求助

我之前也踩过Safari对Blob处理的这个坑，结合你的代码来看，主要有几个关键点需要调整，帮你解决这个问题：

1. 修正Blob的编码类型 #

Safari对utf-16的支持远不如Chrome顺畅，HTML内容通常使用utf-8编码就足够，而且兼容性更好。把type: 'text/html;charset=utf-16'改成type: 'text/html;charset=utf-8'，这能直接避免Safari对内容进行不必要的包裹或编码解析错误。

2. 确保新窗口内容完全加载后再触发打印 #

Safari中，window.open()创建的新窗口内容加载是异步的，直接调用print()可能会在内容还没渲染完成时执行，导致异常。我们需要监听新窗口的load事件，确保内容加载完成后再唤起打印。

3. 补充完整的HTML文档结构 #

你当前只传入了innerHTML内容，Safari对不完整的HTML结构处理更严格，建议把内容包裹成完整的HTML文档（包含<html>、<head>、<body>等标签），这样渲染会更稳定。

修正后的完整代码 #

openTab = () => {
  if (this.printGrid) {
    // 构建完整的HTML文档结构
    const fullHTML = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>打印页面</title>
        </head>
        <body>
          ${this.wrapHTMLBody(this.printGrid.innerHTML)}
        </body>
      </html>
    `;
    
    const url = URL.createObjectURL(
      new Blob([fullHTML], { type: 'text/html;charset=utf-8' })
    );
    
    const newWindow = window.open(url);
    
    // 监听新窗口加载完成事件后再打印
    newWindow.addEventListener('load', () => {
      newWindow.print();
      // 打印完成后释放Blob URL，避免内存泄漏
      URL.revokeObjectURL(url);
    });
  }
};

额外注意事项 #

• 记得在打印完成后调用URL.revokeObjectURL(url)释放资源，避免内存泄漏，这个在Chrome和Safari都适用。
• 如果你的wrapHTMLBody方法已经处理了完整的body结构，那上面的fullHTML里的body部分可以直接用返回值，但确保整体是完整的HTML文档。
• 测试时注意Safari的弹出窗口权限，确保浏览器允许你的页面打开新窗口，否则会阻止操作。

内容的提问来源于stack exchange，提问作者Mauravan