Vue加PDFjs在线预览pdf全渲染demo

最新推荐文章于 2024-08-04 11:18:11 发布

To无忧

最新推荐文章于 2024-08-04 11:18:11 发布

阅读量677

点赞数

文章标签： vue js html5

本文链接：https://blog.csdn.net/qq_46274532/article/details/117172567

版权

PDFjs在线预览pdf，所有页全渲染的demo，使用时把这些文件的url换一下就好。
测试记得把live server打开才能看到。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>'Hello, world!' example</title>
  <style>
      canvas {
          display: block;
          margin: 0 auto;
      }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
        <canvas v-for="i in pageTotal" :id="'the-canvas' + i" style="border: 1px solid black; direction: ltr;"></canvas>
    </div>


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

<script>
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var vm = new Vue({
      el: "#app",
      data () {
          return {
              pageTotal: 0
          }
      },
      methods: {
          init() {
            var url = './web/compressed.tracemonkey-pldi-09.pdf';

            pdfjsLib.GlobalWorkerOptions.workerSrc =
            './build/pdf.worker.js';


            var loadingTask = pdfjsLib.getDocument(url);
            let that = this
            loadingTask.promise.then(function(pdf) {
                that.pageTotal = pdf.numPages
                console.log(that.pageTotal)
                for (let i = 0;i < pdf.numPages; i ++) {
                    console.log(i)
                    pdf.getPage(i + 1).then(function(page) {
                    var scale = 1;
                    var viewport = page.getViewport({ scale: scale, });

                    var canvas = document.getElementById('the-canvas' + (i + 1));
                    if (canvas !== null && canvas.getContext('2d') !== null) { 
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport,
                        };
                        page.render(renderContext);   
                    }
                    });
                }             
            })
            }
        },
        mounted () {
            this.init()
        }
   })
  
</script>

</body>
</html>

To无忧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue加PDFjs在线预览pdf全渲染demo

PDFjs在线预览pdf，所有页全渲染的demo，把这些文件的url换一下就好。测试记得把live server打开才能看到。 'Hello, world!' example <div id="app"> <canvas v-for="i in pageTotal" :id="'the-canvas' + i" style="border: 1px solid black; direction: ltr;"></canvas>&
复制链接

扫一扫