原生js引入pdfjs 显示本地pdf文件

要在原生JS中引入pdf.js并显示本地PDF文件，你可以按照以下步骤操作：

1. 首先，在你的HTML文件中引入pdf.js和pdf.worker.js文件，例如：

<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>

请确保这两个文件在同一个目录下，并且文件名正确。

2. 创建一个用于显示PDF文件的`<canvas>`元素和一个按钮，例如：

<canvas id="pdf-canvas"></canvas>
<button id="pdf-btn">打开PDF文件</button>

请注意，我们将为`<canvas>`元素指定一个ID，以便稍后在JavaScript中引用它。

3. 在JavaScript中，我们需要编写一个函数来加载并显示PDF文件。例如：

function showPDF(pdf_url) {
  // 获取<canvas>元素
  var canvas = document.getElementById('pdf-canvas');
  // 获取渲染上下文
  var ctx = canvas.getContext('2d');

  // 加载PDF文件
  PDFJS.getDocument(pdf_url).then(function(pdf) {
    // 获取第一页
    pdf.getPage(1).then(function(page) {
      // 计算缩放比例
      var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

      // 渲染页面
      page.render({
        canvasContext: ctx,
        viewport: viewport
      });
    });
  });
}

// 为按钮添加点击事件，弹出文件选择框
document.getElementById('pdf-btn').addEventListener('click', function() {
  var input = document.createElement('input');
  input.type = 'file';

  input.onchange = function() {
    var file = input.files[0];
    var reader = new FileReader();

    reader.onload = function(event) {
      var url = event.target.result;
      showPDF(url);
    };

    reader.readAsDataURL(file);
  };

  input.click();
});

在这个函数中，我们使用PDFJS库的`getDocument()`函数来加载PDF文件，然后使用`getPage()`函数获取文件的第一页。我们计算缩放比例，渲染页面并将其显示在`<canvas>`元素中。最后，我们为按钮添加一个点击事件，弹出文件选择框，让用户选择要打开的PDF文件。

请注意，我们使用`FileReader`对象来读取本地文件并将其转换为Data URL，以便我们可以将其传递给`showPDF()`函数。

希望这可以帮助你实现在原生JS中引入pdf.js并显示本地PDF文件。