Question

我有一个ArrayBuffer的PDF文件数据，我想使用浏览器的内置PDF查看器打开它。

这是我正在使用的代码：

const blob = new Blob([pdfBuffer], { type: 'application/pdf' });
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = fileName;
a.style.position = 'fixed';
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

这总是导致PDF文件被下载到设备上的downloads文件夹中，而不是使用浏览器中的PDF查看器在新选项卡中打开。我已经在Chrome，Opera和Firefox中对此进行了测试，结果相同。

在实际从服务器本身下载PDF之前，我已经通过在响应中设置Content-Disposition标头来完成此操作，但是我不确定如何使用客户端Blob来执行此操作。这样。

Answer 1

您可以在window.open()的结果上使用window.URL.createObjectURL(blob)在新窗口中打开PDF，而无需下载它。例如：

var blob = new Blob([pdfBuffer], {type: 'application/pdf'});
var blobURL = URL.createObjectURL(blob);
window.open(blobURL);

Answer 2

与pdfMake库结合使用非常好。

//Preview PDF
export const previewDocument = (content) => {
  const pdfDocGenerator = pdfMake.createPdf(content);
  // Get PDF blob and open in new window
  pdfDocGenerator.getBlob((blob) => {
    let blobURL = URL.createObjectURL(blob);
    window.open(blobURL);
  });
}

如何使用浏览器的PDF查看器而不是下载打开PDF Blob？

2 个答案: