【pdf】自定义组件：预览指定地址的PDF文件

pdf.vue

<template>
  <iframe
    ref="iframe"
    @load="load_iframe"
    :src="src"
    frameborder="no"
    scrolling="no"
    style="width: 100%; height: 100%"
  />
</template>

<script>
export default {
  data() {
    return {
      src: ``,
      pdfUrl: ``,
      filename: ``,
      keyword: ``,
      keywords: ``,
      spreadMode: 1, //默认[双页模式: 1]
    };
  },
  props: ["data"],
  watch: {
    data: {
      handler(newValue, oldValue) {
        //console.log(`深度监听${this.$options.name}：`, newValue, oldValue);
        if (Object.keys(newValue || {}).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
          this.$g.convertForm2ComponentParam(`disabled`, this);
          this.$g.convertForm2ComponentParam(`pdfUrl`, this);
          this.$g.convertForm2ComponentParam(`filename`, this);
          this.$g.convertForm2ComponentParam(`keyword`, this);
          this.$g.convertForm2ComponentParam(`keywords`, this);
          this.$g.convertForm2ComponentParam(`spreadMode`, this);
          this.init();
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },

  methods: {
    reload({ pdfUrl, filename, keyword, keywords } = {}) {
      this.src = "";
      this.$nextTick(() => {
        this.init({
          pdfUrl,
          filename,
          keyword,
          keywords,
        });
      });
    },
    //初始化
    init({
      pdfUrl = this.pdfUrl,
      filename = this.filename || this.$route.query.filename,
      keyword = this.keyword || this.$route.query.keyword,
      keywords = this.keywords || this.$route.query.keywords,
    } = {}) {
      // console.log("打印文件路径", pdfUrl);
      this.src = this.$g.getPDFsrc({
        file: pdfUrl,
        filename,
        keyword,
        keywords,
      });
    },
    // PDF预览■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    load_iframe(d) {
      // iframe加载完成后等待一秒再对PDF进行操作，否则可能没有加载完PDF相关组件无法操作----------------------------------------
      setTimeout(() => {
        this.$nextTick(() => {
          this.PDFViewerApplication = this.getPDFViewerApplication();
          this.pdfSidebar({ command: `open` }); //打开左侧侧边栏
          this.pdfSpreadMode({ spreadMode: this.spreadMode }); //回显单双页模式
        });
      }, 1000);
    },
    // 获取PDF控制器
    getPDFViewerApplication() {
      let PDFViewerApplication;
      if (this.$refs.iframe && this.$refs.iframe.contentWindow) {
        PDFViewerApplication = this.$refs.iframe.contentWindow.PDFViewerApplication;
      }
      return PDFViewerApplication;
    },
    // 跳转到封面
    // 跳转到目录
    jumpPage({
      PDFViewerApplication = this.getPDFViewerApplication(),
      currentPageNumber = 1,
    } = {}) {
      PDFViewerApplication.pdfViewer.currentPageNumber = currentPageNumber;
    },
    // 单双页模式
    pdfSpreadMode({
      PDFViewerApplication = this.getPDFViewerApplication(),
      spreadMode = 1,
    } = {}) {
      /* spreadMode:
      单页模式: 0,
      双页模式: 1,
      书籍模式: 2 */
      PDFViewerApplication && (PDFViewerApplication.pdfViewer.spreadMode = spreadMode);
    },
    // 打开侧边栏
    pdfSidebar({
      PDFViewerApplication = this.getPDFViewerApplication(),
      command = `open`,
    } = {}) {
      PDFViewerApplication && PDFViewerApplication.pdfSidebar[command]();
    },

    // 适合页面
    pdf_page_fit(d) {
      let scaleSelect = this.$refs.iframe.contentDocument.querySelector(`#scaleSelect`);
      scaleSelect && (scaleSelect.value = `page-fit`);
    },
    // ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    findPrevious(d) {
      let findPrevious = this.$refs.iframe.contentDocument.querySelector(`#findPrevious`);
      findPrevious && findPrevious.click();
    },
    findNext(d) {
      let findNext = this.$refs.iframe.contentDocument.querySelector(`#findNext`);
      findNext && findNext.click();
    },
  },
};
</script>

demo

<pdf
    :data="{
        pdfUrl: `pdf绝对地址`,//必填
        filename: `pdf文件名`,//必填
    }"
/>

依赖方法：Vue实现预览PDF并且支持打印，不会出现乱码、拉升变形、打印预览被切割等弱智问题_vue-pdf 打印漏字-CSDN博客文章浏览阅读313次。该文章介绍如何在Vue项目中使用PDF.js库来渲染和查看PDF文件。首先，需要下载并引入PDF.js到项目的静态资源目录，然后在模板中通过iframe嵌入viewer.html，传入pdf文件的URL进行展示。代码示例展示了具体的实现方式。https://blog.csdn.net/qq_37860634/article/details/131035174使用PDF.js预览文件老是报错Message: file origin does not match viewer's_otherError @ app.js:1140怎么办？？_message: file origin does not match viewer's-CSDN博客文章浏览阅读1.8k次，点赞2次，收藏5次。文章提供了针对PDF.js中因fileOrigin不等于viewerOrigin导致的错误的解决方案。用户需注释掉web/app.js或（如果是最新版本）web/viewer.js中的特定代码行以消除报错。https://blog.csdn.net/qq_37860634/article/details/131035028