Vue3項目中預覽并打印PDF的兩種方法
更新時間：2023年05月25日 15:26:20 作者：種①個月亮
最近在項目開發(fā)中碰到一個需求是在頁面中展示pdf預覽功能,下面這篇文章主要給大家介紹了關于Vue3項目中預覽并打印PDF的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
項目場景：
后臺接口請求數(shù)據(jù)，返回PDF文檔的鏈接，在vue3頁面可預覽和打印該PDF。
在之前的Vue2項目中，預覽并打印PDF用的是vue-pdf這個插件，但在vue3中是不支持的，只能換個插件了，于是經(jīng)過測試，也踩了一些坑，總結了以下兩種方法：
方法一：使用vue-pdf-embed + pdfjs-dist
①首先，安裝這兩個插件依賴
pnpm install vue-pdf-embed pnpm install pdfjs-dist2.0.943
當時我在安裝pdfjs-dist時遇到了問題 ，我沒有指定版本號，控制臺報錯，翻了一些文章，有博主建議安裝2.0.943版本，于是又重新輸入命令，安裝了這個版本，就一切正常了
②頁面中寫相關代碼
// 引入插件
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
//定義
const state = reactive({
source: '', // 預覽pdf文件地址
pageNum: 0, // 當前頁面
scale: 1, // 縮放比例
numPages: 0 // 總頁數(shù)
})
const scale = computed(() => `transform:scale(${state.scale})`)<div>
// 操作按鈕
<div class="page-tool">
<div class="page-tool-item" @click="lastPage">上一頁</div>
<div class="page-tool-item" @click="nextPage">下一頁</div>
<div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
<div class="page-tool-item" @click="pageZoomOut">放大</div>
<div class="page-tool-item" @click="pageZoomIn">縮小</div>
</div>
//pdf預覽
<vue-pdf-embed ref='pdf' :source="state.source" :style="scale" :page="state.pageNum" class="vue-pdf-embed" />
</div><script setup>
onMounted(()=>{
getPdfUrl(pdfUrl) // pdfUrl即url地址鏈接
})
function getPdfUrl(data){
state.source = data
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument(data)
loadingTask.promise.then(pdf => {
state.numPages = pdf.numPages
})
}
// 上一頁
function lastPage() {
if (state.pageNum > 1) {
state.pageNum -= 1
}
}
// 下一頁
function nextPage() {
if (state.pageNum < state.numPages) {
state.pageNum += 1
}
}
// 放大
function pageZoomOut() {
if (state.scale < 2) {
state.scale += 0.1
}
}
// 縮小
function pageZoomIn() {
if (state.scale > 1) {
state.scale -= 0.1
}
}
</script>為了好看一些，我給操作按鈕寫了樣式
<style lang="scss" scoped>
.page-tool {
display: flex;
position: absolute;
top: 5px;
left: 50%;
z-index: 100;
transform: translateX(-50%);
align-items: center;
background: rgb(66 66 66);
color: white;
border-radius: 19px;
cursor: pointer;
justify-content: center;
font-size: 15px;
}
.page-tool-item {
padding: 4px 10px;
cursor: pointer;
}
</style>最終的實現(xiàn)效果：
打?。?/p>
const { proxy } = getCurrentInstance()
<div @click='print'>打印</div>
<script setup>
function print(){
proxy.$refs['pdf'].print()
}
</script>方法二：使用pdfjs-dist，canvas渲染，pdf.js打印
說明：pdf.js可以打印canvas數(shù)據(jù)，所以選擇這個插件
①首先，安裝依賴
pnpm install pdfjs-dist
安裝之后，在項目的node_modules文件夾里，找到pdfjs-dist ->build->pdf.worker.js文件，拷貝出來放到public根目錄下，接著找到pdfjs-dist ->cmaps文件夾，拷貝一下放到public->static文件夾里，如下圖所示：
②下載print.js放入項目中，在需要使用的頁面，引入方法，然后方法調(diào)用
具體我是參考的這篇博文：前端使用print.js實現(xiàn)打印_printjs
③代碼實現(xiàn)
// 打印按鈕
<div @click="print">打印</div>
//pdf預覽顯示
<div>
<div id="printDom" ref="printDom">
<div v-for="item in state.numPages" :key="item">
<canvas :id="`pdfCanvas-${item}`" :ref="`pdfCanvas-${item}`" />
</div>
</div>
</div>
<script setup>
import * as pdfjsLib from 'pdfjs-dist' //引入pdfjs-dist
import Print from '@/assets/js/print' //引入print.js
const { proxy } = getCurrentInstance()
const state = reactive({
source: '', // 預覽pdf文件地址
pageNum: 0, // 當前頁面
scale: 1, // 縮放比例
numPages: 0, // 總頁數(shù)
pdfCtx: null // pdf對象
})
onMounted(()=>{
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument({
url: pdfUrl, //這里的pdfUrl即pdf的鏈接地址
cMapUrl: '../../../../static/cmaps/',
cMapPacked: true
})
loadingTask.promise.then(pdf => {
// console.log('頁數(shù)', pdf.numPages)
state.numPages = pdf.numPages
state.pdfCtx = pdf
nextTick(() => {
renderPdf()
})
})
})
const renderPdf = (num = 1) => {
state.pdfCtx.getPage(num).then(page => {
const canvas = document.getElementById(`pdfCanvas-${num}`)
const ctx = canvas.getContext('2d')
const viewport = page.getViewport(1.6)
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: ctx,
viewport: viewport
})
if (num < state.numPages) {
renderPdf(num + 1)
}
})
}
//打印
function print(){
Print(proxy.$refs['printDom'])
}
</script>總結
到此這篇關于Vue3項目中預覽并打印PDF的兩種方法的文章就介紹到這了,更多相關Vue3預覽打印PDF內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue中import from的來源及省略后綴與加載文件夾問題
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
解決vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?的問題
這篇文章主要介紹了vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類問題的原因所在并給出解決方法，需要的朋友可以參考下2022-09-09
這篇文章給大家介紹了Vue使用v-bind動態(tài)綁定CSS樣式,文中有相關的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
掌握Qwik.js,輕松應對前端SSR渲染問題！本指南將為你揭示如何使用這款強大的框架,讓你在前端開發(fā)中游刃有余2023-12-12
在vue.js中使用JSZip實現(xiàn)在前端解壓文件的方法
今天小編就為大家分享一篇在vue.js中使用JSZip實現(xiàn)在前端解壓文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-cli3啟動服務如何自動打開瀏覽器配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要來和大家分享一些關于 Vue3中Hooks封裝的技巧,希望能夠為大家在 Vue 3 項目中更好地利用 Hooks 提供一些思路和實踐經(jīng)驗2023-12-12
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)一個自定義顏色選擇器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
這篇文章主要給大家介紹了關于Vue.js中該如何自己維護路由跳轉記錄的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05