Vue3项目中预览并打印PDF的两种方法

 更新时间:2023年05月25日 15:26:20   作者:种①个月亮  
最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

项目场景:

后台接口请求数据,返回PDF文档的链接,在vue3页面可预览和打印该PDF。

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

方法一:使用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 // 总页数
})
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>

 最终的实现效果:

打印:

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

③代码实现

// 打印按钮
<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, // 总页数
        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('页数', 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue改变对象或数组时的刷新机制的方法总结

    vue改变对象或数组时的刷新机制的方法总结

    这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue中v-for通过动态绑定class实现触发效果

    vue中v-for通过动态绑定class实现触发效果

    这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue3设置Proxy代理解决跨域问题

    Vue3设置Proxy代理解决跨域问题

    这篇文章主要介绍了Vue3设置Proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue控制多行文字展开收起的实现示例

    vue控制多行文字展开收起的实现示例

    这篇文章主要介绍了vue控制多行文字展开收起的实现示例(也叫控制文字展开隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 基于Vue实现文件拖拽上传功能

    基于Vue实现文件拖拽上传功能

    文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧
    2024-03-03
  • vue动态组件之:is在组件中的使用场景

    vue动态组件之:is在组件中的使用场景

    这篇文章主要介绍了vue动态组件之:is在组件中的使用场景,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Element Input输入框的使用方法

    Element Input输入框的使用方法

    这篇文章主要介绍了Element Input输入框的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue点击标签切换选中及互相排斥操作

    vue点击标签切换选中及互相排斥操作

    这篇文章主要介绍了vue点击标签切换选中及互相排斥操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3.0 项目搭建和使用流程

    vue3.0 项目搭建和使用流程

    这篇文章主要介绍了vue3.0 项目搭建和使用流程,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 通过vue-cli来学习修改Webpack多环境配置和发布问题

    通过vue-cli来学习修改Webpack多环境配置和发布问题

    这篇文章主要介绍了随着Vue-cli来'学'并'改'Webpack之多环境配置和发布的相关知识,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改,感兴趣的朋友一起跟着小编学习吧
    2017-12-12

最新评论