前端如何解决 iframe 预览pdf 直接下载文件问题

可以通过在 iframe 中嵌入一个 PDF.js 的实例来解决这个问题。PDF.js 是一个开源的 JavaScript 库，可以将 PDF 文件转换为 html5，并在网页上进行预览。

具体实现步骤如下：

引入 PDF.js 的脚本文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>

在页面中添加一个 iframe，并设置其 src 属性为 PDF 文件的链接：

<iframe id="pdf-viewer" src="https://example.com/myfile.pdf"></iframe>

在 JavaScript 中，使用 PDF.js 将 PDF 文件转换为 html5，并在 iframe 中显示：

const pdfViewer = document.getElementById('pdf-viewer');
const pdfUrl = pdfViewer.src;
const pdfDoc = null;
const pageNum = 1;

pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  pdfDoc = pdf;
  pdf.getPage(pageNum).then(page => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const viewport = page.getViewport({ scale: 1 });

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };

    page.render(renderContext).promise.then(() => {
      pdfViewer.contentDocument.body.appendChild(canvas);
    });
  });
});

这样，当用户点击 iframe 中的 PDF 文件链接时，就会以 html5 形式在 iframe 中预览，而不是直接下载。