下載

npm i vue-pdf

引入(在所需要預覽的頁面)

?

<script>import axios from 'axios'import pdf from 'vue-pdf'import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 加載中文的包export default {components: {pdf},data () {return {numPages:''，url:''，src:''，path:'',//pdf的地址，例如：/testFile.pdf}},created(){this.url = axios.defaults.baseURL; // 項目當前的域名this.src = pdf.createLoadingTask({// url:'http://localhost:8080'+this.path,// 此行是為了在本地跑項目的時候能夠加載出來，僅用于開發顯示url:this.url+this.path,//正式環境用這個！CMapReaderFactory})// 讓所有頁數一次性加載完，否則就只會加載第一頁this.src.then(pdf => {this.numPages = pdf.numPages}).catch(() => {})},}</script>

this.url一定要是當前項目的域名，否則會報跨域，請確保this.url+this.path是能夠在瀏覽器訪問的

例如：http://test.com/testFile.pdf

html部分

?

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

若只寫<pdf :src="src"></pdf>，僅加載第一頁

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue中使用Vue-pdf在线预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。