一：概述

在开发项目中，我们有时候需要进行预览文件，那么这样的功能应该怎么实现呢？

二：方式

1：使用浏览器内置的PDF查看器，直接在浏览器中打开和预览，只需要将URL设置<a>标签的href属性，或者使用window.open方法打开

<!-- 方法1: 使用超链接 -->
<a href="/path/to/your/document.pdf" target="_blank">预览PDF</a>

<!-- 方法2: 使用JavaScript -->
<button onclick="window.open('/path/to/your/document.pdf', '_blank')">预览PDF</button>

2：使用PDF.js，使用了HTML5 canvas来渲染PDF文件

<!-- 引入pdf.js和pdf.worker.js -->
<script src="/path/to/pdf.js"></script>
<script src="/path/to/pdf.worker.js"></script>
<!-- PDF容器 -->
<div id="pdf-container"></div>

<script>
  // 初始化PDF.js
  pdfjsLib.getDocument("/path/to/your/document.pdf").promise.then(function (pdfDoc) {
    // 获取第一页
    pdfDoc.getPage(1).then(function (page) {
      // 设置视口和比例
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale });

      // 准备用于渲染的Canvas
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 将Canvas添加到DOM中
      document.getElementById("pdf-container").appendChild(canvas);

      // 通过Canvas渲染PDF页面
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>

3：使用三方服务来进行预览，比较依赖外包服务

<iframe
  src="http://docs.google.com/gview?url=xxxxxxxx"
  style="width:600px; height:500px;"
  frameborder="0"
></iframe>

三：总结

1：简单预览，直接采用浏览器内置

2：复杂的PDF交互，可以选择库或者三方