vue通过url方式展示PDF的几种方法

目录

• 1.使用pdfjs-dist 插件，通过iframe标签显示 
• @L_360_1@
• 3.第三种方法使用了pdfjs-dist插件，通过url实现PDF转图片显示
• 4.直接通过iframe标签 
• 总结

最近vue项目中遇到预览pDF出现乱码问题，尝试了各种办法受尽折磨，以此记录一下使用的几种方法

1.使用pdfjs-dist 插件，通过iframe标签显示 

首先 npm install pdfjs-dist --save

 npm直接下载插件  npm install --save pdfjs-dist@2.0.943，@2.0.943这是指定版本号，不需要指定版本的就不需要带，下载后在使用的页面直接引入。

 然后直接设置pdf路径就可以直接展示，downloadUrl 是插件中的viewer.htML地址，resFile是文件下载地址，到此就能正常预览PDF，组件功能也很多，如需要额外的功能也可以在viewer.js自行修改

2.使用vue-pdf插件

执行下面命令下载插件（vue-pdf是基于pdfjs-dist），并修改pacakge.json文件 

        npm i pdfjs-dist@2.5.207 --save        npm i vue-pdf@4.2.0 --save        "dePEndencies": {
                  "pdfjs-dist": "2.5.207",                  "vue-pdf": "4.2.0",          }
    

在使用的页面中直接引入插件，标签为pdf> 就可以，路径赋值同第一种方法

3.第三种方法使用了pdfjs-dist插件，通过url实现PDF转图片显示

引入需要的插件pdfjs-dist，workerSrc(具体功能可以百度，没搞明白)

 本地文件URL:

 通过URL转换blob类型，然后转为base64,这块可以直接拿去用，getDay()方法可以换成自己想要的文件名，这个方法转成base64后是包含前面类型的，又处理了一下，看个人需求

fileLinkToStreamDownload(url) {
      let fileName = this.getDay()      let reg = /^([hH][tT]{
2}
[pP]:\/\/|[hH][tT]{
2}
[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/      if (!reg.test(url)) {
        throw new Error('传入参数不合法,不是标准的文件链接')      }
 else {
            let xhr = new XMLHttPRequest()        xhr.open('get', url, true)        xhr.setRequestHeader('Content-type', `application/pdf;
charset-UTF-8`)        xhr.responseType = 'blob'        let that =this        xhr.onload = function() {
          if (this.status == 200) {
                //接受二进制文件流            VAR blob = this.response            // that.downloadexportFile(blob, fileName);
                that.bloBToBase64(blob).then(res =>
 {
                    // blob转base64                let baseArr = res.splIT(',');
                    that.showPdf(baseArr[1]);
              }
)          }
        }
        xhr.send()      }
    }
,     //Blob类型转BASE64      blobToBase64(blob) {
          return new Promise((resolve, reject) =>
 {
            const fileReader = new FileReader();
            fileReader.onload = (e) =>
 {
              resolve(e.target.result);
        }
    ;
            // readAsDataURL        fileReader.readAsDataURL(blob);
            fileReader.onerror = () =>
 {
              reject(new Error('blobToBase64 error'));
        }
    ;
      }
    );
    }
,    getDay() {
      let time = new Date(),      year = time.getFullYear(),      month = time.getMonth() + 1,      day = time.getDate(),      timeStem = time.getTime()      return `${
year}
/${
month}
/${
day}
/${
timeStem}
.pdf`    }
    ,

拿到base64后，开始转图片处理：这个原理这里不多说了，也是照搬的， 如果PDFJS.getDocument()获取不到pdf对象，可以考虑一下版本问题（@2.2.228亲测好用）

async showPdf(base64Val) {
      let pdfList = document.querySelector('.pdfList') //通过querySelector选择DOM节点,使用document.getElementById()也一样      let base64 = base64Val //获得bas464编码      let decodedBase64 = window.atob(base64) //使用浏览器自带的方法解码      let pdfcurrent = await PDFJS.getDocument({
data: decodedBase64}
    ) //返回一个pdf对象      let pages = pdfcurrent.numPages //声明一个pages变量等于当前PDF文件的页数      for (let i = 1;
     i = pages;
 i++) {
     //循环页数        let canvas = document.createElement('canvas')         let page = await pdfCurrent.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象        let scale = 1;
    //缩放倍数，1表示原始大小        let viewport = page.getViewport(scale);
             let context = canvas.getContext('2d');
     //创建绘制canvas的对象        canvas.height = viewport.height;
     //定义canvas高和宽        canvas.width = viewport.width;
        let renderContext = {
          canvasContext: context,          viewport: viewport        }
    ;
        await page.render(renderContext)        canvas.classname = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas        pdfList.appendChild(canvas) //插入到pdfList节点的最后      }
    }
    ,

通过这个方法亲测可以成功转图片，但是依旧没解决图片乱码问题

4.直接通过iframe标签 

页面标签

 还是通过转码，创建下载链接，直接给地址赋值皆可以了，#toolbar = 0 设置工具栏不显示

 我这块需求是不能下载，只能打印，所以隐藏了工具栏，新增了打印按钮，最开始想的是直接window.print()方法打印页面，先看效果

 只打印pdf界面右侧的小图（没搞懂），然后决定使用print-js打印插件，还是npm install--save print-js 先下载插件 

在需要的页面直接引入

 用法很简单，按钮绑定

 直接用就可以，直接把地址附上，type是pdf类型就可以了

到这就实现了预览，打印功能，但还没找到获取打印页面按钮的方法，有知道的可以交流。

期间还涉及到了vue父窗口，子窗口通信的问题，碰到同样问题的可以看一下，附上图片

父页面

子页面调用

 地址如下

https://www.js-code.com/article/272949.htm

总结

到此这篇关于vue通过url方式展示PDF的几种方法的文章就介绍到这了,更多相关vue url方式展示PDF内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue全家桶入门基础教程
• Vue全家桶实践项目总结(推荐)
• 一篇Vue、React重点详解大全
• vue项目刷新当前页面的三种方式(重载当前页面数据)
• vue跨窗口通信之新窗口调用父窗口方法实例
• vue全家桶-vuex深入讲解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！