Angular中通过URL打印Office文件（.doc/.xls等）的问题求助

问题描述 #

在Angular项目中，通过URL链接获取.doc、.xls等Office文件，点击按钮打印时会触发文件下载，且打印窗口无内容，但PDF、图片、文本文件可正常打印。当前使用的代码如下：

this.http.get(`${fileUrl}`, options).subscribe((res: any) => {
      /* istanbul ignore next */
      if (res) {
        let blob = new Blob([res], {type: res.type});
        const blobUrl = URL.createObjectURL(blob);
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = blobUrl;
        document.body.appendChild(iframe);
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
      }
 });

测试文件URL：

• PDF文件：https://somepath/testpdf4afdd7ea-5b55-44f4-af2d-f30767764ca9.pdf
• DOC文件：https://somepath/file-sample_100kB8de49893-0e1c-4b8f-8f50-fac5e9fc759f.doc

解决方案 #

原因分析 #

浏览器无法直接解析渲染Office文件（.doc/.xls），通过Blob创建的URL会触发下载而非在iframe中渲染，导致打印窗口无内容。

可行方案 #

方案1：利用Office在线预览服务

借助在线预览接口将Office文件转为可渲染的链接，嵌入iframe后触发打印：

printOfficeFile(fileUrl: string) {
  // 构造在线预览链接
  const previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = previewUrl;
  
  // 加载完成后打印
  iframe.onload = () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    setTimeout(() => document.body.removeChild(iframe), 1000);
  };
  
  document.body.appendChild(iframe);
}

注意：要求文件URL为公网可访问，且无跨域限制。

方案2：前端转换文件格式

用第三方库将Office文件转为HTML后打印：
以处理.docx的mammoth.js为例：

1. 安装依赖：

npm install mammoth --save

2. 实现打印逻辑：

import * as mammoth from 'mammoth';

printDocxFile(fileUrl: string) {
  this.http.get(fileUrl, { responseType: 'blob' }).subscribe((blob: Blob) => {
    mammoth.convertToHtml({ blob })
      .then(result => {
        const printContainer = document.createElement('div');
        printContainer.style.display = 'none';
        printContainer.innerHTML = result.value;
        document.body.appendChild(printContainer);
        
        window.print();
        setTimeout(() => document.body.removeChild(printContainer), 1000);
      })
      .catch(err => console.error('文件转换失败:', err));
  });
}

说明：mammoth.js仅支持.docx，.doc需额外处理；Excel文件可使用xlsx库转为HTML表格，逻辑类似。

方案3：后端转换为PDF

由后端将Office文件转为PDF格式，前端按PDF打印逻辑处理。此方式兼容性最好，需后端借助LibreOffice、Aspose等工具实现格式转换。

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