js 预览 pdf 稳定插件

在 JavaScript 中，可以使用 PDF.js 这个开源项目来实现预览 PDF 的功能。PDF.js 是一个基于 HTML5 技术的 PDF 查看器，它不依赖于任何外部插件或软件，可以直接在浏览器中使用。

使用 PDF.js 预览 PDF 的步骤如下：

1. 下载 PDF.js 项目的源代码，或者使用 CDN 引入 PDF.js 的脚本和样式文件。

2. 在 HTML 页面中创建一个容器元素，用于显示 PDF。

3. 使用 JavaScript 代码加载 PDF 文件并显示在容器元素中。

下面是一个简单的示例代码：

<!-- 引入 PDF.js 的样式文件 -->
<link rel="stylesheet" href="path/to/pdfjs/web/viewer.css">

<!-- 创建一个容器元素 -->
<div id="pdf-container"></div>

<!-- 引入 PDF.js 的脚本文件 -->
<script src="path/to/pdfjs/build/pdf.js"></script>

<script>
  // 获取容器元素
  const container = document.querySelector('#pdf-container');

  // 加载 PDF 文件
  pdfjsLib.getDocument('path/to/pdf/file.pdf').promise.then(pdf => {
    // 获取 PDF 的第一页
    return pdf.getPage(1);
  }).then(page => {
    // 创建一个 Canvas 元素用于显示 PDF 页面
    const canvas = document.createElement('canvas');
    container.appendChild(canvas);

    // 获取 Canvas 的上下文对象
    const context = canvas.getContext('2d');

    // 获取 PDF 页面的大小
    const viewport = page.getViewport({ scale: 1 });

    // 设置 Canvas 的大小
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染 PDF 页面到 Canvas 上
    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
</script>

这段代码会在页面上显示 PDF 文件的第一页。你可以根据需要修改代码来加载并显示其他页码的 PDF 页面。