pdfh5-移动端pdf预览

pdfjs在pc端预览：https://www.cnblogs.com/wuqilang/p/13031290.html

当使用pdfjs在移动端预览时显示不出来，pc端调式是可以的，到了手机上 就不行。

 

使用pdfjs：

1、下载：npm install pdfh5

2、使用：

<template>
  <div style="height:100vh;" ref="pdfRef"></div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  mounted() {
    const pdfh5 = new Pdfh5(this.$refs.pdfRef, {
      pdfurl:
        'http://filegateway.test.mistong.com/api/filecenter/fileService/file/947631061519778296.pdf'
    })
    // 监听完成事件
    pdfh5.on('complete', function (status, msg, time) {
      console.log(
        `状态：${status}，信息：${msg}，耗时：${time}毫秒，总页数：${this.totalNum}`
      )
    })
  }
}
</script>

 

自带的download方法，在手机上各个浏览器表现不一致，推荐使用自定义的下载方法：

 

export function downloadUrl(url,fileName){
  let title = fileName;
    let urlName = url.split('/'),
       urlNameLen  = urlName.length-1;

    if(!title){
      title = urlName[urlNameLen]
    }
    fetch(url)
    // 获取 blob 对象
    .then(res=>res.blob())
    .then(blob=>{
      var link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link);
      var url = window.URL.createObjectURL(blob);
      link.href = url;
      link.download = title;
      link.click();
      //下载完成后清理URL对象和a标签
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    })

}