vue項目展示pdf文件的方法實現

更新時間：2023年07月23日 13:49:29 作者：Miss Stone

本文主要介紹了vue項目展示pdf文件的方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近我有個需求,就是在h5頁面上展示pdf文件,分頁,最后一頁有個蒙層陰影漸變的效果,嘗試過一些插件,但都不是很好用,最后用了pdfjs-dist加上canvas 可以看下效果

先下載:

npm i pdfjs-dist@2.5.207

下面展示代碼 html:

<template>
	<canvas v-for="pageNumber in pageCount" :key="pageNumber" :id="`refCanvas${pageNumber}`" style="width: 100%; height: auto"></canvas>
</template>

js:

<script>
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
const PDFJS = require('pdfjs-dist')
PDFJS.workerSrc = workerSrc
export default {
    data() {
        return {
            url: '',
            pageCount: null,
            scale: 2,
            width: '',
            height: '',
        }
    },
    mounted() {
        this.getPdfFile()
    },
    methods: {
        async getPdfFile() {
            await apiName({
               xxx:xxx
            }).then((res) => {
                var binaryData = [];
                binaryData.push(res);
                let url = window.URL.createObjectURL(new Blob(binaryData, {
                    type: "application/pdf"
                }))
                this.url = url
                this._loadFile(url);
            }).catch((err) => {
                console.log('err', err)
            })
        },
        _loadFile (url) {
            // 獲取整個 文檔
            PDFJS.getDocument({
                url,
                cMapPacked: true
            }).promise.then(async (pdf) => {
            	let pageCount = pdf.numPages
                this.pageCount = pageCount
                for (let i = 1; i <= pageCount; i++) {
                     const page = await pdf.getPage(i)
                     const viewport = page.getViewport({scale: this.scale})
                     const canvas = document.getElementById(`refCanvas${i}`);
                     canvas.height = viewport.height
                     canvas.width = viewport.width
                     this.width = viewport.width
                     this.height = viewport.height
                     const renderContext = {
                         canvasContext: canvas.getContext('2d'),
                         viewport
                     }
                     page.render(renderContext).promise.then(() => {
                         // 最后一頁pdf增加蒙層
                         if(i === pageCount) {
                             this.addMask(i)
                         }
                     })
                 }
            },(err) => {
                if(err.name == 'MissingPDFException'){
                    console.log('無效的PDF鏈接')
                }
            })
        },
        // 添加蒙層
        addMask(i) {
            const canvas = document.getElementById(`refCanvas${i}`);
            let ctx = canvas.getContext('2d')
            const gradient = ctx.createLinearGradient(0, this.height / 5, 0, this.height);
            gradient.addColorStop(0, "rgba(243, 244, 249, 0)");
            gradient.addColorStop(0.2, "rgba(243, 244, 249, 0.3)");
            gradient.addColorStop(0.4, "rgba(243, 244, 249, 0.7)");
            gradient.addColorStop(0.5, "rgba(243, 244, 249, 0.9)");
            gradient.addColorStop(0.6, "rgba(243, 244, 249, 1)");
            gradient.addColorStop(0.8, "rgba(243, 244, 249, 1)");
            gradient.addColorStop(1, "rgba(243, 244, 249, 1)");
            ctx.fillStyle = gradient;
            ctx.fillRect (0, this.height / 5, this.width, (this.height / 5) * 4);
        }
    }
}
</script>

到此這篇關于vue項目展示pdf文件的方法實現的文章就介紹到這了,更多相關vue展示pdf文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: