[Vue]使用pdf.js实现在线预览pdf文件

最新推荐文章于 2024-03-06 10:25:12 发布

iChangebaobao

最新推荐文章于 2024-03-06 10:25:12 发布

阅读量3.3k

点赞数 1

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/iChangebaobao/article/details/103927730

版权

Vue 同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 2 订阅

订阅专栏

PDF.js官网

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
</head>
<body>

<h1>'Hello, world!' example</h1>

<canvas id="the-canvas" style="border:1px  solid black"></canvas>

<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>

<script id="script">
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var url = './helloworld.pdf';
  //
  // The workerSrc property shall be specified.
  //
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    '../../node_modules/pdfjs-dist/build/pdf.worker.js';
  //
  // Asynchronous download PDF
  //
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({ scale: scale, });
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
</script>

<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
  document.getElementById('code').textContent =
      document.getElementById('script').text;
</script>
</body>
</html>

参考
一个PDF在线预览小demo

Demo
Vue中使用PDF.js

H5中使用PDF.js

iChangebaobao

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[Vue]使用pdf.js实现在线预览pdf文件

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>'Hello, world!' example</title></head><body><h1>'Hello, world!' example</h...
复制链接

扫一扫