JS 在新选项卡中打开 PDF - HTML

在网页中，我们经常需要打开 PDF 文件。通常，点击链接会将 PDF 文件下载到本地计算机上。但是，有时候我们希望以浏览器内置的 PDF 阅读器或外部 PDF 阅读器打开 PDF 文件，而不是将其下载到本地计算机上。这时候，我们可以使用 JavaScript 在新选项卡中打开 PDF 文件。

使用 window.open() 打开 PDF 文件

我们可以使用 JavaScript 中的 window.open() 方法打开一个新选项卡，并指定 URL。JavaScript 代码如下：

window.open('path/to/pdf/file.pdf', '_blank');

在这段代码中，'path/to/pdf/file.pdf' 是 PDF 文件的路径和文件名。'_blank' 是参数，表示在新选项卡中打开 PDF 文件。我们可以将该代码放入一个链接的 onclick 事件中，以在用户单击该链接时打开 PDF 文件。

使用 PDF.js 打开 PDF 文件

如果我们希望以浏览器内置的 PDF 阅读器打开 PDF 文件，我们可以使用 Mozilla 开发的开源 JavaScript 库 PDF.js。PDF.js 可以在不需要插件的情况下解析和呈现 PDF 文件。

我们可以先将 PDF.js 引入网页中：

<script src="path/to/pdfjs-dist/build/pdf.js"></script>

然后，我们可以使用以下 JavaScript 代码在新选项卡中打开 PDF 文件：

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.getDocument('path/to/pdf/file.pdf').then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var canvas = document.createElement('canvas');
    var viewport = page.getViewport({scale: 1.5});
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    document.body.appendChild(canvas);
    page.render({canvasContext: canvas.getContext('2d'), viewport: viewport}).promise.then(function() {
      var url = canvas.toDataURL();
      var a = document.createElement('a');
      a.href = url;
      a.target = '_blank';
      a.download = 'file.pdf';
      a.click();
      document.body.removeChild(canvas);
    });
  });
});

在这段代码中，'path/to/pdf/file.pdf' 是 PDF 文件的路径和文件名。我们首先使用 pdfjsLib.getDocument() 方法加载 PDF 文件，然后在 then() 方法中使用 getPage() 方法获取 PDF 文件的第一页并呈现在一个 canvas 元素中。最后，我们通过使用 toDataURL() 方法将 canvas 元素转化为 URL，使用 window.open() 方法在新选项卡中打开 PDF 文件。

需要注意的是，PDF.js 的呈现可能会需要较长时间，而且在某些浏览器中可能不兼容。但是，它仍然是一种很好的跨平台解决方案，可以在不需要插件的情况下在大多数现代浏览器中打开 PDF 文件。

总结

本文介绍了两种在新选项卡中打开 PDF 文件的方法。第一种方法是使用 window.open() 方法，在新选项卡中打开 PDF 文件。第二种方法是使用 PDF.js 在浏览器内置的 PDF 阅读器中打开 PDF 文件。根据实际情况选择使用哪种方法。