Vue3预览并打印PDF的两种方法_vue3预览pdf_种①个月亮的博客-CSDN博客

安宇雨 - 随手采集
2023-08-18 14:57:41
随手采集
0000-未整理-等待研究

项目场景：后台接口请求数据，返回PDF文档的链接（即pdf文件在服务器上的存放路径），在vue3页面可预览和打印该PDF。

在之前的Vue2项目中，预览并打印PDF用的是vue-pdf这个插件，但在vue3中是不支持的，只能换个插件了，于是经过测试，也踩了一些坑，总结了以下两种方法：

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

①首先，安装这两个插件依赖

pnpm install vue-pdf-embedpnpm 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 // 总页数})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(()=>{        // 首先请求接口，获取pdf存放地址，赋值给pdfUrl（此处省略请求代码）        // 拿到pdf路径后，执行下面的函数        getPdfUrl(pdfUrl)     })    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>

最终的实现效果：

打印：

const { proxy } = getCurrentInstance() <div @click='print'>打印</div><script setup>    function print(){        proxy.$refs['pdf'].print()    }</script>

方法二：使用pdfjs-dist，canvas渲染，pdf.js打印

说明：pdf.js可以打印canvas数据，所以选择这个插件

①首先，安装依赖

pnpm install pdfjs-dist

安装之后，在项目的node_modules文件夹里，找到pdfjs-dist ->build->pdf.worker.js文件，拷贝出来放到public根目录下，接着找到pdfjs-dist ->cmaps文件夹，拷贝一下放到public->static文件夹里，如下图所示：

②下载print.js放入项目中，在需要使用的页面，引入方法，然后方法调用

具体我是参考的这篇博文：前端使用print.js实现打印_printjs_@我不认识你的博客-CSDN博客

③代码实现

// 打印按钮<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({        pageNum: 0, // 当前页面        scale: 1, // 缩放比例        numPages: 0, // 总页数        pdfCtx: null // pdf对象    })    onMounted(()=>{        // 请求服务接口，获取pdf存放地址，赋值给pdfUrl变量（此处省略请求代码）        // pdfUrl获取到之后，接着执行以下代码        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('页数', 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>

原网址: 访问
创建于: 2023-08-18 14:57:40
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到