vue-pdf的注意事项

四岁爱上了她2024-03-24 15:58

vue2项目

node版本切换到14.21.3

npm install --save vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207

$\^ 注意$ ：一般情况下，执行上述命令就可以解决这个问题，但有时候在执行完后还是不行，这时候如果你执意要搜索为什么，答案普遍都是这个，有可能还有有一个说是脚手架版本太高，也就是@vue/cli版本是4.5以上，需要降一下版本，这时候可不要贸然去降低脚手架版本了，原因可能不是这个，注意了,vue-pdf的最新版本是2020年发布的，距离现在已经有4年了，我们都忽视了node版本，那时候的node版本可没有我们现在安装的那么高，所以就会出现不兼容的情况，（当时我使用的是node16，切换到14版本就可以了）这时候换个node版本，删除node_modules文件夹重新编译就可以解决引入报错的问题，如果不想卸载node可以参考nvm教程，快速切换node版本。

js 复制代码

<template>
  <div class="home">
    <pdf
          v-for="i in pageCount"
          :src="pdfUrl"
          :key="i + 'pdf'"
          :page="i"
          class="pdf-item"
      ></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    data() {
    return {
        pageCount:1,
        pdfUrl:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
    };
  },
  components: {pdf},
  mounted() {
    this.previewFile()
  },
  methods:{
    async previewFile() {
      try {
        let loadingTask = pdf.createLoadingTask(this.pdfUrl);
        loadingTask.promise.then(pdf => {
          this.pageCount = pdf.numPages;
        }).catch((e) => {
          console.log("pdf初始化错误", e);
        })
      } catch (e) {
        console.log("pdf加载出错了", e);
      }
    }
  }
}
</script>

vue3项目

npm install @vue-office/pdf vue-demi@0.14.6

js 复制代码

<template>
  <div class="apdd">
    <vue-office-pdf 
        :src="pdfUrl"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
  </div>
</template>
  <script setup>
  //引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import { ref, onMounted, nextTick } from "vue";
const pageCount = ref(1);
const pdfUrl = ref(
  "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
);

const renderedHandler = () => {
  console.log("渲染完成")
};
const errorHandler = () => {
  console.log("渲染失败")
};
</script>