在移动设备上从 Angular 下载 Word .docx 作为 Blob 文件

Posted 2023-03-22

【中文标题】在移动设备上从 Angular 下载 Word .docx 作为 Blob 文件

【英文标题】：Download Word .docx as Blob file from Angular on mobile devices

【发布时间】：2022-01-02 04:48:02

【问题描述】：

我正在尝试从 Angular 应用程序中的 REST API (.NET Core FileContentResult) 下载 .docx 文件。在 PC 上一切正常，但在 VMware Workspace ONE Web 浏览器中下载 .docx 文件时出现问题（没有尝试 Chrome 或 Safari 等标准浏览器，看起来只有 android WebView）。这是公司应用程序，此浏览器是唯一允许的。

问题仅在于 .docx 文件。 PDF、.doc 和 .xlsx（由ClosedXML 创建）等文件运行良好。

REST API 调用（也尝试使用“arraybuffer”而不是“blob”并在客户端创建 Blob 对象，但问题仍然存在）

this.httpClient.get(requestUrl, 
  responseType: 'blob',
  observe: 'response'
);

然后我用FileSaver 保存响应正文。

generateDocument(file: string | Blob, name: string): void 
  FileSaver.saveAs(file, name);

我还尝试了创建链接并单击它的方法（它不起作用）。 使用 window.open(blobUrl) 的解决方案不起作用。

编辑：

我得到的信息是它在 ios 中使用相同的浏览器根本不工作。用户收到错误消息“链接无效。”

有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

您是否有无法正常工作的可用测试文件？在 Android 或 IOS 上测试？

我还测试了在 MS Word (Microsoft 365) 中创建的简单 .docx 文件，其中包含文本“Test”。我正在Android上进行测试。它试图在手机上的 Microsoft Word 中打开文档，但 Word 说文件已损坏，如果我尝试在那里使用修复，我只会收到错误消息“文件无法打开”。

我给你做了一个测试文件：batman.dev/static/70085191/download.docx

我还使用不同的解决方案创建了测试页面，它们在 Chrome 和 Safari 等浏览器中都可以正常工作，但在 VMware Workspace ONE Web 浏览器中却不行。问题是浏览器。

【参考方案1】：

如果您可以检索获得ArrayBuffer，则可以使用这些字节来启动下载：

在这里测试：https://batman.dev/static/70085191/

async function downloadUrl(url) 
  downloadBuffer(
    await (await fetch(url)).arrayBuffer()
  )


function downloadBuffer(arrayBuffer) 
  const a = document.createElement('a')
  a.href = URL.createObjectURL(new Blob(
    [ arrayBuffer ],
     type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
  ))
  a.download = 'my-file.docx'
  a.click()

【讨论】：

我试过了，但没有用。手机打不开文档。

试试我添加的工作测试。它在我的 Android Chrome 手机上下载并打开。

它在 Chrome 中运行良好，但在 VMware Workspace ONE Web 中无法运行。我使用不同的解决方案制作了测试页面，并在 Android 上的 Chrome 和 iOS 上的 Safari 中进行了测试。在这些浏览器中一切正常。