【vue】vue-pdf预览在线地址文件和本地文件（base64

vue-pdf预览在线地址文件和本地文件（base64）

npm i vue-pdf

• vue-pdf最好别用4.2,因为他依赖的pdfjs为2.5
• 但他会下载最新的2.16版本，这个版本和原来的2.5结构目录不一样
• 一定要使用4.2的话就手动装一下pdfjs-dist的2.5.207版本
• ==> npm i pdfjs-dist@2.5.207

<template>
  <div class="VuePdf">
    <div>
      <div>
        <span>在线地址</span>
        <input type="text" v-model="remoteUrl" />
        <button @click="clickUrl">确定</button>
      </div>
      <div style="margin: 10px 0">
        <input type="file" @change="handelChange($event)" />
      </div>
    </div>

    <pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"></pdf>
  </div>
</template>

<script>
/**
 * vue-pdf最好别用4.2,因为他依赖的pdfjs为2.5，
 * 但他会下载最新的2.16版本，这个版本和原来的2.5结构目录不一样，
 * 一定要使用4.2的话就手动装一下pdfjs-dist的2.5.207 ==> npm i pdfjs-dist@2.5.207
 */

import pdf from "vue-pdf";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"; // 解决部分文字不显示的问题
export default {
  name: "VuePdf",
  components: { pdf },
  data() {
    return {
      pdfSrc: undefined,
      numPages: 1, //  pdf 文件总页数
      remoteUrl:
        "https://raw.githubusercontent.com/xxxsjan/pdf-server/main/static/pdf/sample.pdf",
      // 也可以使用以下地址
      // 本地 "/static/test.pdf"  这个是放在public下的文件
      // 本地服务 http://127.0.0.1:5000/pdf/sample.pdf"
    };
  },
  methods: {
    handelChange(e) {
      // https://www.cnblogs.com/-roc/p/14750732.html
      var file = new File(e.target.files, "r");
      var reader = new FileReader();
      reader.readAsDataURL(file);
      const vm = this;
      reader.onload = function () {
        // 方法一 传base64 可能会报xhr错误
        const url = reader.result.replace(/octet-stream/, "pdf");
        // 方法二 传解码后的base64
        const data = window.atob(
          reader.result.substring(reader.result.indexOf(",") + 1)
        );
        vm.createPdf({
          // url,
          data,
          cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
          cMapPacked: true,
          CMapReaderFactory,
        });
      };
      reader.onerror = function (error) {
        console.log("Error: ", error);
      };
    },
    /**
     * 设置pdfSrc
     * @param {*} options 地址或者配置对象
     */
    createPdf(options) {
      var loadingTask = (this.pdfSrc = pdf.createLoadingTask(options));
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log("👍 获取成功", loadingTask, this.numPages);
        })
        .catch((err) => {
          console.error("loadingTask 失败", err);
        });
    },
    clickUrl() {
      this.createPdf(this.remoteUrl);
    },
  },
};
</script>

<style lang="scss" scoped></style>