记录一次开发失败的经历

最新推荐文章于 2023-10-18 15:59:40 发布

Jinx的含义就是Jinx.

最新推荐文章于 2023-10-18 15:59:40 发布

阅读量265

点赞数

文章标签：前端 javascript 开发语言 vscode vue.js

本文链接：https://blog.csdn.net/qq_33079871/article/details/128020343

版权

需求背景：

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转成图片来展示，可接受