记录一次开发失败的经历

需求背景:

h5预览pdf

初次调研

vue-pdf

开发过程

vue-pdf npm官网https://www.npmjs.com/package/vue-pdf/v/4.3.0使用起来很简单:

1.安装

npm install vue-pdf 
yarn add vue-pdf

2.使用

2.1多页加载 (如果是单页,url直接丢在pdf组件的src上)

<template>
  <pdf
    v-for="index in numPages"
    :key="index"
    :src="pdfUrl"
    :page="index"
    @page-loaded="pageLoaded"
  ></pdf>
<script>
  import pdf from 'vue-pdf'
  export default {
    components: {
      pdf
      return {
        numPages: null,
        pdfUrl: '/static/report.pdf',
      }
    },
    methods: {
      loadPdf() {
        this.pdfUrl = pdf.createLoadingTask(this.pdfUrl)
        const temp = Date.now()
        const currentPdf ='pdfurl路径' + '?t=' + temp
        this.pdfUrl = pdf.createLoadingTask(currentPdf)
        this.pdfUrl.promise.then((pdf) => {
          this.$nextTick(() => {
            this.numPages = pdf.numPages // pdf总页数
          })
        })
      },
      pageLoaded(e) {
        console.log('当前页', e)
        if (e === this.numPages) {
          console.log('加载完成')
        }
      }
    }
  }

3.本地调试

错误1:

 俩种方法:

1. 改源码

找到文件 node_modules/vue-pdf/src/pdfjsWrapper.js b/node_modules/vue-pdf/src/pdfjsWrapper.js

将以下代码删掉

pdfRender.cancel().catch(function(err) {
    emitEvent('error', err);
});

2.降版本 安装vue-pdf@4.0.0 可解决此报错

错误2:第二次打开pdf时候报错

原因:缓存问题

解决办法:在url后面拼接当前时间戳可解决

此时 本地预览可以打开,下班

第二天,问题来了,测试环境打包之后报错

 尝试过网上的很多办法,改过源码

修改node_modules中的worker-loader/dist/workers/index.js

将publicPath 改为./

添加依赖patch-package

在package.json中的scripts中添加 "postinstall": "patch-package"

执行命令:npx patch-package worker-loader

(上面,命令是打补丁)

虽然报错解决了,但是白屏,没有任何报错

 试过将pdf转成blob格式,还是无效

更换过vue-pdf 和pdfjs-dist版本 无效

最终放弃了  不知道有没有大佬和我解释一下

更换方案

pdfh5

安装: 

yarn add pdfh5

代码

<template>
  <div>
    <div id="demo"></div>
  </div>
</template>
<script>
    import Pdfh5 from "pdfh5";
    import "pdfh5/css/pdfh5.css";
    import axios from 'axios';
    export default {
        name: 'Image',
        data() {
            return {
                url: "",
                pdfh5: null
            };
        },
        created(){
            this.url = this.$route.query.url
        },
        mounted(){
           //实现方式一
            axios
            .get(this.url, {
                responseType: 'arraybuffer'
            })
            .then(res => {
                this.pdfh5 = new Pdfh5('#demo', {
                    data: res.data
                });
            });
          //实现方式二
          //先实例化
          // this.pdfh5 = new Pdfh5("#demo", {
          //   pdfurl: this.url
          // });
          // this.pdfh5.on("complete", function (status, msg, time) {
        //console.log("状态:" + status + ",信息:" + msg + ",耗时:" + time + "毫秒,总页数:" + this.totalNum)
      //})
        }
    };
</script>

这个有一个弊端就是它是将pdf转成图片来展示,可接受

最终实现方案

pdf.js

Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download 

方法可以借鉴

https://blog.csdn.net/kaimo313/article/details/108522343icon-default.png?t=M85Bhttps://blog.csdn.net/kaimo313/article/details/108522343

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值