Vue-cli3.0使用pdf.js详解

Vue-cli3.0使用pdf.js详解

1. pdf.js下载

官网:pdf.js官网
Vue-cli3.0使用pdf.js详解_第1张图片

2. 放入项目中

为了不让其被编译,放在public文件夹下。
Vue-cli3.0使用pdf.js详解_第2张图片
① 更改web文件夹下的DEFAULT_URL设置为' '
在这里插入图片描述
更改为
在这里插入图片描述
② 跨域问题:注释下面的代码即可

 const {  origin, protocol } = new URL(file, window.location.href);

 if (origin !== viewerOrigin && protocol !== "blob:") {
      throw new Error("file origin does not match viewer's");
  }

Vue-cli3.0使用pdf.js详解_第3张图片

③ pdf.js 接收流文件,如果给的是base64格式需要转换

  // 将base64转换成blob路径并返回
		export function base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
    return new Promise((resolve) => {
      // 使用 atob() 方法将数据解码
      let byteCharacters = atob(b64data);
      let byteArrays = [];
      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        let slice = byteCharacters.slice(offset, offset + sliceSize);
        let byteNumbers = [];
        for (let i = 0; i < slice.length; i++) {
            byteNumbers.push(slice.charCodeAt(i));
        }
        // 8 位无符号整数值的类型化数组。内容将初始化为 0。
        // 如果无法分配请求数目的字节,则将引发异常。
        byteArrays.push(new Uint8Array(byteNumbers));
      }
      let result = new Blob(byteArrays, {
        type: contentType
      })
      result = Object.assign(result,{
        // 这里一定要处理一下 URL.createObjectURL
        preview: URL.createObjectURL(result),
        // name: `XXX.png`
      });
      resolve(result)
    })
   }

具体使用:

    let base64 = this.info.fileUrl.split(',')[1]
            base64ToBlob({ b64data: base64, contentType: 'application/pdf' }).then(res => {
                // 转后后的blob对象
                console.log('blob', res)
                this.pdfUrl = res.preview//路径
            })

3. 在页面中的使用

 window.open('/pdf/web/viewer.html?file=' + encodeURIComponent(url))

如果需要base64转blob

 let url = this.dataURLtoBlob(this.previewFileUrl)
 window.open('/pdf/web/viewer.html?file=' + encodeURIComponent(url))

4. 注意的事项

vue2.0与vue3.0中的区别:
vue2.0中放在static文件夹下,使用时如下:
在这里插入图片描述
页面中的使用:

window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(url))

5. 结合iframe使用

主要是src的设置

  <iframe v-if="info.previewType == 'pdf'" ref="previewPdf" style="width:100%;height:calc(100vh - 180px);" :src="'/pdf/web/viewer.html?file='+encodeURIComponent(pdfUrl)" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
            </head>
        </iframe>

你可能感兴趣的:(前端,前端,vue.js,前端框架)