zoukankan      html  css  js  c++  java
  • PDFJS使用

    PDFJS是在线预览PDF的一款神器。 对于PC端浏览器,一般直接提供pdf文件,iframe一下就可以直接预览了。我使用这个插件的原因是在移动端,android微信无法在线预览。

    (android微信搜了一下,原因是微信android使用x5的内核,就是QQ浏览器的那个,经过多次尝试,貌似它只要检测到文件流,就会直接下载,而不是打开到页面上)

    先贴一个地址:http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples 这个是官方示例。

    使用pdfjs在线预览pdf可以有两个选择:

    1、使用pdfjs已经写好的viewer.html页面,例子:http://mozilla.github.io/pdf.js/web/viewer.html 做的功能比较全面。就是要部署pdfjs一堆的代码到服务器上。移动端也有直接预览的页面 https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer 这个没找到在线可运行的例子。

    2、就是自己调用API做了,如果你的要求不多,实现起来也不难。

    下面说下我的做法

    场景:提供微信端在线pdf预览功能,框架使用Vue + pdfjs

    step1:引用js文件

    import PDFJS from 'pdfjs-dist'
    

    step2:读取pdf文件

    我在vue的beforeRouteEnter里加载pdf

    var p = api.getPdfBase64Data(this.fileid) //后台读取pdf文件base64内容(下面说为什么是base64)
    p.then(function(pdfData){
                PDFJS.getDocument({data:pdfData}).then(function getPdfHelloWorld(pdf) {
                t.totalPage = pdf.numPages;//总页数
                //我是一次加载了所有页,网上一些是一页页加载的,因为我的pdf页数不多
                for(var i = 1;i<=t.totalPage;i++) {
                  pdf.getPage(i).then(function getPageHelloWorld(page) {
                    var scale = 1;//缩放倍数,1表示原始大小
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas' + page.pageNumber);
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                      canvasContext: context,
                      viewport: viewport
                    };
                    page.render(renderContext).promise.then(function(){
                      t.loadedPageCount ++;//加载一个+1,最后总数和totalPage一样了,表示pdf加载完了
                    });
                  });
                }
              }).catch(function(e){
                alert('附件暂时无法移动端预览,请在PC端查看')
              });
    })
    

    step3:HTML

    <canvas v-for="n in totalPage" :id="'the-canvas' + n" class="pdf-content"></canvas>
    

    canvas是pdf显示的地方,一个canvas加载一页pdf,所以我按总页数生成了好几个canvas

    为什么使用base64呢?

    因为,在x5内核的微信里,就算使用ajax调用返回的是pdf文件,貌似也会走下载那一套,然后ajax接收不到文件流,因此就显示不了。 使用base64,就是一个完整的字符串,可以正常返回到ajax.

    放大、缩小怎么办呢:

    我的做法是重新调用一下上面的for循环的内容,重新画一遍。

    其它的功能,如打印、导航栏,暂时没用到,还没做。 需要用到的可以研究下git上viewer.html的实现方式。

    还有文本复制, pdfjs是在canvas上又盖了一个div,把文本显示在里面的各个小div里的,记得是pdfjs有一个API page.getTextContent().then(function(textContent) , 需要用到的可以查一下如何实现。

  • 相关阅读:
    changing a pointer rather than erasing memory cells
    验证码识别 edge enhancement 轮廓增强 region finding 区域查找
    Manipulating Data Structures
    passing parameters by value is inefficient when the parameters represent large blocks of data
    Aliasing 走样
    Artificial Intelligence Research Methodologies 人工智能研究方法
    Thread safety
    include pointers as a primitive data type
    flat file
    functional cohesion
  • 原文地址:https://www.cnblogs.com/wileywong/p/8032801.html
Copyright © 2011-2022 走看看