前端预览pdf静态文件

在前端预览 PDF 静态文件，可以考虑使用以下两种方式：

1. 使用 <embed> 标签

<embed> 标签可以在网页中嵌入 PDF 文件，从而实现在线预览。示例代码如下：

<embed src="example.pdf" type="application/pdf" width="100%" height="600px" />

其中，`src` 属性指定 PDF 文件路径；`type` 属性指定文件类型为 PDF；`width` 和 `height` 属性指定嵌入对象的宽度和高度。

2. 使用 PDF.js 库

PDF.js 是 Mozilla 开发的一个 JavaScript 库，可以在浏览器中渲染 PDF 文件。示例代码如下：

<!-- 引入 PDF.js 库 -->
<script src="pdf.js"></script>
<!-- 创建一个容器 -->
<div id="pdf-container"></div>
<!-- 渲染 PDF 文件 -->
<script>
  // 获取 PDF 文件路径
  var pdfUrl = 'example.pdf';
  // 获取容器元素
  var container = document.getElementById('pdf-container');
  // 加载 PDF 文件
  PDFJS.getDocument(pdfUrl).then(function(pdf) {
    // 获取第一页
    pdf.getPage(1).then(function(page) {
      // 创建 canvas 元素
      var canvas = document.createElement('canvas');
      // 设置 canvas 尺寸
      var viewport = page.getViewport(1);
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      // 获取渲染上下文
      var context = canvas.getContext('2d');
      // 渲染 PDF 页面到 canvas
      page.render({canvasContext: context, viewport: viewport});
      // 添加 canvas 到容器
      container.appendChild(canvas);
    });
  });
</script>

其中，`pdf.js` 是 PDF.js 库的文件路径；`pdfUrl` 是 PDF 文件路径；`pdf-container` 是渲染容器元素的 ID。

以上两种方式都可以实现在线预览 PDF 静态文件，具体选择哪种方式，可以根据项目需要和个人喜好来决定。