vue项目中移动端,pc端,实现pdf预览和分页

目前项目中,移动端和 PC端都有pdf预览的需求,个人建议PC端用vue-pdf,能很好地实现分页的效果,移动端建议用pdfh5.js,一次性加载,滑动查看,先记录下vue-pdf

1.安装:npm install --save vue-pdf

2.引入:

import pdf from 'vue-pdf'
components: {pdf}

3.写template

<div class="pdf" v-show="fileType === 'pdf'">
    <p class="arrow">
    // 上一页
    <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
    {
  {currentPage}} / {
  {pageCount}}
    // 下一页
    <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
    </p>
    // 引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了
    <pdf
      :src=&#
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在vue3项目实现pdf在线预览下载功能,可以使用pdf.js库。以下是基本的实现步骤: 1. 安装pdf.js库:可以使用npm安装,命令为npm install pdfjs-dist。 2. 引入pdf.js库:在需要使用的组件引入pdf.js库,可以使用import语法。 3. 创建canvas元素:使用canvas元素来渲染pdf文件,需要在组件创建一个canvas元素。 4. 加载pdf文件:使用pdf.js库提供的方法加载pdf文件,可以使用fetch或者axios等方式获取pdf文件。 5. 渲染pdf文件:使用pdf.js库提供的方法将pdf文件渲染到canvas元素。 6. 实现下载功能:使用a标签的download属性或者使用FileSaver.js等库实现pdf文件下载功能。 以下是一个简单的示例代码: ``` <template> <div> <canvas ref="pdfCanvas"></canvas> <button @click="downloadPdf">下载</button> </div> </template> <script> import pdfjs from 'pdfjs-dist' import { saveAs } from 'file-saver' export default { data() { return { pdfUrl: 'http://example.com/example.pdf', pdfDoc: null, pdfPage: null } }, mounted() { this.loadPdf() }, methods: { async loadPdf() { try { const pdfData = await fetch(this.pdfUrl).then(res => res.arrayBuffer()) this.pdfDoc = await pdfjs.getDocument({ data: pdfData }).promise this.pdfPage = await this.pdfDoc.getPage(1) this.renderPdf() } catch (error) { console.error(error) } }, async renderPdf() { try { const canvas = this.$refs.pdfCanvas const context = canvas.getContext('2d') const viewport = this.pdfPage.getViewport({ scale: 1 }) canvas.width = viewport.width canvas.height = viewport.height await this.pdfPage.render({ canvasContext: context, viewport }).promise } catch (error) { console.error(error) } }, downloadPdf() { const blob = new Blob([this.pdfDoc], { type: 'application/pdf' }) saveAs(blob, 'example.pdf') } } } </script> ``` 以上代码实现pdf文件的加载和渲染,以及pdf文件的下载功能。需要注意的是,pdf.js库的使用可能会比较复杂,可以参考pdf.js官方文档进行详细了解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值