vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題
本來想的很簡單 覺得 把要展示到第幾頁的頁碼給到v-for的 i in PageRange 中的PageRange即可 但是本地沒問題 打包部署就不顯示pdf
1.先安裝vue-pdf-embed
具體的安裝使用方法可以參考文章末尾介紹。
安裝使用中可能遇到的問題都有寫 很詳細(xì)，跳轉(zhuǎn)到文末詳細(xì)講解。
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不加載
以為是加載順序?qū)е碌?嘗試多次修改后無效 我甚至還翻譯了官方文檔
我的神奇同事找到的最終原因:
parseInt()
這貨竟然要parseInt一下才行！??！
PS：vue3.0借用vue-pdf-embed實現(xiàn)在線預(yù)覽pdf文件
在需求中，經(jīng)常遇見pdf的在線預(yù)覽效果
很多pdf插件不支持vue3，或者是沒有集成翻頁放大縮小功能，比如vue-pdf。
實現(xiàn)原理：借用依賴vue-pdf-embed(pdf預(yù)覽),pdfjs-dist（獲取pdf總頁數(shù)）
借用文檔：https://juejin.cn/post/6995856687106261000
實現(xiàn)效果
實現(xiàn)步驟
一：安裝依賴
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 復(fù)制一份放到項目 public 目錄下后引入
PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
// 引入文件
import pdfUrl from '@/assets/file/example.pdf'
export default {
components: {
VuePdfEmbed,
},
data() {
return {
source: pdfUrl, // 文件路徑
pageNum: 1, // 當(dāng)前頁數(shù)
scale: 1, // 縮放比例
numPages: 0, // 總頁數(shù)
};
},
mounted() {
// 獲取總頁數(shù)
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. ，經(jīng)過各種原因查找，最終找到了一句描述：pdf.worker.js必須位于自己的文件中（而不是與pdf.js捆綁在一起）。否則它不能在服務(wù)工作線程中運(yùn)行。
問題解決
將 pdfjs-dist/build/pdf.worker.js 復(fù)制一份放到項目 public 目錄下
1:放置文件
在node-module文件夾中，如圖找到pdfjs-dist/build/pdf.worker.js
放置到項目 public，與index.html同級
2:配置頁面中的js文件
// 也就是本文js文件中，最上方引入的代碼 PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
到此這篇關(guān)于vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的文章就介紹到這了,更多相關(guān)vue3.0在線預(yù)覽pdf 控制頁碼顯示范圍不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多級側(cè)邊欄的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue請求后端接口導(dǎo)出excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Vue-neo4j實現(xiàn)繪制三國人物圖譜關(guān)系
這篇文章主要介紹了使用Vue-neo4j實現(xiàn)繪制三國人物圖譜關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
詳解如何在vue+element-ui的項目中封裝dialog組件
這篇文章主要介紹了詳解如何在vue+element-ui的項目中封裝dialog組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
一個組件相當(dāng)于是一個小模塊,它是html、css與js的集合體,可以用于描述頁面中的某個結(jié)構(gòu)(模塊),下面這篇文章主要給大家介紹了關(guān)于輕松學(xué)Vue組件之單文件組件的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue項目中使用fetch的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了Vue?項目的成功發(fā)布和部署的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue-cli單頁面預(yù)渲染seo-prerender-spa-plugin操作
這篇文章主要介紹了vue-cli單頁面預(yù)渲染seo-prerender-spa-plugin操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue3如何使用ref獲取元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時,改變導(dǎo)航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08