首頁 > 軟體

vue3.0使用vue-pdf-embed線上預覽pdf 控制頁碼顯示範圍不生效問題解決

2023-01-16 14:01:02

vue3.0使用vue-pdf-embed線上預覽pdf 控制頁碼顯示範圍不生效問題

本來想的很簡單 覺得 把要展示到第幾頁的頁碼給到v-for的 i in PageRange 中的PageRange即可 但是本地沒問題 打包部署就不顯示pdf

1.先安裝vue-pdf-embed

具體的安裝使用方法可以參考文章末尾介紹。
安裝使用中可能遇到的問題都有寫 很詳細,跳轉到文末詳細講解。

2.安裝後 在使用頁面引入 

  import VuePdfEmbed from "vue-pdf-embed";
 components:{
    VuePdfEmbed,
 },
 <div>
    <vue-pdf-embed v-for="i in PageRange" :source="pdfSrc " :key="i" :page="i"></vue-pdf-embed>
  </div>
 data () {
      return {
        pdfSrc : '',
        PageRange: undefined, // pdf顯示的頁碼範圍
      }
    },
 	// 獲取pdf
      getPdf() {
        this.pdfSrc = 'data:application/pdf;base64,' + ‘base64'
        this.PageRange= parseInt('10') // 這裡是需要顯示的頁碼範圍 eg: 10 50 100
      }

之前本地控制頁面顯示範圍一直沒有什麼問題 打包部署 pdf不載入
以為是載入順序導致的 嘗試多次修改後無效 我甚至還翻譯了官方檔案

我的神奇同事找到的最終原因:
parseInt()
這貨竟然要parseInt一下才行!!!

PS:vue3.0借用vue-pdf-embed實現線上預覽pdf檔案

在需求中,經常遇見pdf的線上預覽效果
很多pdf外掛不支援vue3,或者是沒有整合翻頁放大縮小功能,比如vue-pdf。
實現原理:借用依賴vue-pdf-embed(pdf預覽),pdfjs-dist(獲取pdf總頁數)
借用檔案:https://juejin.cn/post/6995856687106261000

實現效果

實現步驟

一:安裝依賴

npm i vue-pdf-embed -S
npm install --save pdfjs-dist

二:頁面使用

vue檔案中

<template>
  <div>
    <div class="div">
        <p class="arrow" style="text-align:center">
	        <!-- // 上一頁 -->
	        <van-tag color="#7232dd" plain @click="prev">上一頁</van-tag>
	        {{pageNum}} / {{numPages}}
	        <!-- // 下一頁 -->
	        <van-tag color="#7232dd" @click="next" style="margin-left: 5px>下一頁</van-tag>
	    </p>
	    <p style="text-align:center">
	      <van-tag color="#7232dd" plain @click="zoomA">放大</van-tag>
	      <van-tag color="#7232dd" @click="zoomB" style="margin-left: 5px">縮小</van-tag>
	    </p>
    </div>
    <vue-pdf-embed :source="source"
      class="vue-pdf-embed"
      :style="scaleFun"
      :page="pageNum" />
  </div>
</template>
<style scoped>
.div {
  top: 0;
  position: fixed;
  z-index: 999;
}
.vue-pdf-embed {
  text-align: center;
}
</style>

js檔案中

// 引入元件
import VuePdfEmbed from "vue-pdf-embed";
const PDF = require('pdfjs-dist')
// 頁面報錯解決,在將 pdfjs-dist/build/pdf.worker.js 複製一份放到專案 public 目錄下後引入
PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
// 引入檔案
import pdfUrl from '@/assets/file/example.pdf'
export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      source: pdfUrl, // 檔案路徑
      pageNum: 1, // 當前頁數
      scale: 1,  // 縮放比例
      numPages: 0, // 總頁數
    };
  },
  mounted() {
    // 獲取總頁數
    this.getPdfNumPages()
  },
  computed: {
    scaleFun(index) { // 縮放
     var scale = this.scale;
      return `transform:scale(${scale})`;
    },
  },
  methods: {
     getPdfNumPages() {
      const url = this.source
      const loadingTask = PDFJS.getDocument(url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      })
    },
    prev() {
      if (this.pageNum > 1) {
        this.pageNum -= 1;
      }
    },
    next() {
      if (this.pageNum < this.numPages) {
        this.pageNum += 1;
      }
    },
    zoomA() {
      this.scale += 0.1;
    },
    zoomB() {
      this.scale -= 0.1;
    },
  },
};

三:可能報錯一

問題原因

缺少解析pdf所需loader

問題解決

1:下載依賴

file-loader:file-loader可以用來幫助webpack打包處理一系列的檔案;比如:.png 、 .jpg 、.jepg等格式的圖片,pdf格式的檔案等等

npm install --save-dev file-loader
or
cnpm install --save-dev file-loader

2:設定vue.config.js檔案

const path = require('path');
module.exports = {
	// webpack設定
	chainWebpack: config => { 
	   config.module.rule('pdfjs-dist').test({
         test: /.js$/,
         include: path.join(__dirname, 'node_modules/pdfjs-dist')
       }).use('babel-loader').loader('babel-loader').options({
         presets: ['@babel/preset-env'],
         plugins: ['@babel/plugin-proposal-optional-chaining']
       }),
	  config.module
	  .rule('pdf')
	  .test(/.pdf$/)
	  .use('file')
	    .loader('file-loader')
	    .end();
	}
}

三:可能報錯二

問題原因

需要在引入 pdfjs-dist 之後設定 workerSrc ,但是引入 pdfjs-dist/build/pdf.worker.entry 之後瀏覽器還是有個警告:Warning: Setting up fake worker. ,經過各種原因查詢,最終找到了一句描述:pdf.worker.js必須位於自己的檔案中(而不是與pdf.js捆綁在一起)。否則它不能在服務工作執行緒中執行。

問題解決

將 pdfjs-dist/build/pdf.worker.js 複製一份放到專案 public 目錄下

1:放置檔案

在node-module資料夾中,如圖找到pdfjs-dist/build/pdf.worker.js
放置到專案 public,與index.html同級

2:設定頁面中的js檔案

// 也就是本文js檔案中,最上方引入的程式碼
PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'

到此這篇關於vue3.0使用vue-pdf-embed線上預覽pdf 控制頁碼顯示範圍不生效問題的文章就介紹到這了,更多相關vue3.0線上預覽pdf 控制頁碼顯示範圍不生效內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com