今天的越寫悅快樂系列文章為大家?guī)韚e項(xiàng)目如何集成PDF組件的文章。做過前端開發(fā)的小伙伴都知道，我們?nèi)绾卧陧撁嬷屑蒔DF文件，也就是讀取二進(jìn)制數(shù)據(jù)并渲染到頁面上，我們可以使用vue-pdf來快速構(gòu)建頁面，也可以自定義組件使用pdf-dist來直接操作PDF文檔，通過獲取文檔信息然后根據(jù)頁碼依次渲染頁面，接下來的文章我為大家?guī)鞻ue項(xiàng)目中如何集成PDF組件，也就是渲染PDF文件到頁面上。
開發(fā)環(huán)境
- Window 10.0.17763
- Node 10.15.3
- Yarn 1.16.0
- Vue CLI 3.7.0
- Git 2.21.0
接入步驟
添加依賴
{
"name": "vant-tour",
"version": "1.0.0",
"private": true,
"description": "An Vant Tour",
"license": "MIT",
"author": "Watony Weng <softweitao@126.com>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"babel-runtime": "^6.26.0",
"vant": "^1.6.14",
"vue": "^2.6.10",
"vue-pdf": "^4.0.6",
"vue-router": "^3.0.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"babel-plugin-import": "^1.8.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"postcss-pxtorem": "^4.0.1",
"qs": "^6.7.0",
"vue-cli-plugin-axios": "0.0.4",
"vue-template-compiler": "^2.6.10",
"vuejs-logger": "^1.5.3",
"webpack": "^4.32.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"Android >= 4.0",
"iOS >= 7"
]
}
vue-pdf庫需要依賴babel-runtime
引入組件 - 模板部分
<pdf
v-for="i in numPages"
:key="i"
:src="src"
:page="i"/>
引入組件 - 邏輯部分
<script>
import { NavBar } from 'vant'
import pdf from 'vue-pdf'
export default {
name: 'Verify',
components: {
[NavBar.name]: NavBar,
pdf
},
data() {
return {
// 頁面標(biāo)題
pageTitle: '查看業(yè)務(wù)',
// 頁面參數(shù)
taskId: '',
processId: '',
key: '',
// 模板參數(shù)
src: undefined,
numPages: undefined
}
},
mounted() {
// 獲取參數(shù)
this.taskId = this.$route.query.taskId
this.processId = this.$route.query.processId
this.key = this.$route.query.key
// 文件渲染
this.getPdf()
},
methods: {
onClickLeft() {
this.$router.push('upcoming')
},
onClickRight() {
this.$router.push({
path: 'review',
query: {
taskId: this.taskId,
processId: this.processId,
key: this.key
}
})
},
getPdf() {
const url = this.axios.defaults.baseURL + this.taskId + '.PDF'
this.$log.info(url)
this.src = pdf.createLoadingTask(url)
this.src
.then(pdf => {
this.numPages = pdf.numPages
})
.catch(error => {
Toast.fail(error)
})
}
}
}
</script>
運(yùn)行
原理分析
我們使用vue-pdf這個(gè)組件其實(shí)是利用pdfjs生成文檔數(shù)據(jù)，然后通過組件進(jìn)行渲染，通過PDFJS.getDocument()獲取文檔對(duì)象，然后根據(jù)src屬性按照頁碼依次渲染。
參考
FAQ
- PDF文件有簽章不顯示該怎么辦？
臨時(shí)方案可以注釋
pdf-dist下的pdf.worker.js中的Sig判斷
- PDF文件加載報(bào)錯(cuò)
請(qǐng)參考issue
個(gè)人收獲及感想
本文的使用只是pdf.js的冰山一角，若是有興趣的朋友可以深入學(xué)習(xí)一下該開源庫的渲染原理和其它用法。
今天的這篇文章我們分析和整理了如何在Vue項(xiàng)目中渲染PDF文件，其實(shí)是利用pdf.js來處理和渲染文件的，vue-pdf只是針對(duì)Vue封裝了一些屬性方法，假設(shè)我們不使用Vue也可以渲染PDF文件，只是需要我們利用pdf.js提供的方法來操作DOM，獲取URL地址最后渲染在頁面上。通過以上的整理和總結(jié)我們應(yīng)該了解PDF文件渲染的原理以及如何封裝Vue組件，最后可以在修改源代碼的基礎(chǔ)上解決一些實(shí)際的業(yè)務(wù)問題。希望大家保存學(xué)習(xí)的熱情，繼續(xù)構(gòu)建高可用低延遲的產(chǎn)品和服務(wù)，為公司創(chuàng)建更大的價(jià)值。若是我的文章對(duì)你有所啟發(fā)，那將是我莫大的榮幸。
