Vue3項目中預(yù)覽并打印PDF的兩種方法

更新時間：2023年05月25日 15:26:20 作者：種①個月亮

最近在項目開發(fā)中碰到一個需求是在頁面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項目中預(yù)覽并打印PDF的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

項目場景：

后臺接口請求數(shù)據(jù)，返回PDF文檔的鏈接，在vue3頁面可預(yù)覽和打印該PDF。

在之前的Vue2項目中，預(yù)覽并打印PDF用的是vue-pdf這個插件，但在vue3中是不支持的，只能換個插件了，于是經(jīng)過測試，也踩了一些坑，總結(jié)了以下兩種方法：

方法一：使用vue-pdf-embed + pdfjs-dist

①首先，安裝這兩個插件依賴

pnpm install vue-pdf-embed
pnpm install pdfjs-dist2.0.943

當(dāng)時我在安裝pdfjs-dist時遇到了問題，我沒有指定版本號，控制臺報錯，翻了一些文章，有博主建議安裝2.0.943版本，于是又重新輸入命令，安裝了這個版本，就一切正常了

②頁面中寫相關(guān)代碼

// 引入插件
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
//定義
const state = reactive({
    source: '', // 預(yù)覽pdf文件地址
    pageNum: 0, // 當(dāng)前頁面
    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預(yù)覽
     <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預(yù)覽顯示
<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: '', // 預(yù)覽pdf文件地址
        pageNum: 0, // 當(dāng)前頁面
        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>