如何使用 ngx-extended-pdf-viewer 显示本地 pdf？

【问题标题】：How do i display local pdfs using ngx-extended-pdf-viewer?如何使用 ngx-extended-pdf-viewer 显示本地 pdf？
【发布时间】：2021-11-04 23:23:36
【问题描述】：

在我的示例应用程序中，我让用户传递一个 URL，例如 https://www.test.com?file:///path/filename.pdf

我正在提取该文件查询并将其传递到组件中：

<ngx-extended-pdf-viewer
  [src]="sourceUrl"
  [handTool]="false"
  [showFindButton]="true"
  zoom="100%"
  height="100vh"
  [useBrowserLocale]="true"
></ngx-extended-pdf-viewer>

我收到“消息：缺少 PDF”的错误消息。有没有办法将以file:/// 开头的本地路径转换为PDF？

【问题讨论】：

基本上，用户计算机中的本地文件尚未存储在服务器的某个位置。以file:/// 协议开头的任何内容。
我也能够找到自己问题的答案。与此同时，我已经用 xhr 试过了，但这可能也适用于 fetch

标签： angular pdf reader pdf-viewer ngx-extended-pdf-viewer

【解决方案1】：

对于任何可能偶然发现这个问题的人，我能够确定如何去做。基本上，使用 xhr 并将响应类型设置为arraybuffer

Idk，如果除了下面的代码之外我还需要做任何事情，但它可以工作。

  function downloadLocalFile(url: string, cb: (response: Uint8Array) => void) {
    var xhr = new XMLHttpRequest();
    xhr.onload = () => {
      const response = new Uint8Array(xhr.response);
      cb(response);
    };

    xhr.onerror = (error) => {
      console.log(error);
    };

    xhr.open("GET", decodeURIComponent(url));
    xhr.responseType = "arraybuffer";
    xhr.send();
  }

你可以这样使用它：

downloadLocalFile('file:///path/file.pdf', (arrayBuffer) => {
  console.log(arrayBuffer);
});

我没有用fetch尝试过，我不太确定你是否可以将响应设置为arraybuffer

【讨论】：