首页 > 其他分享 >vue pdf预览

vue pdf预览

时间:2022-10-10 16:11:19浏览次数:40  
标签:canvas vue 预览 await let pdf page viewport

用到的插件是vuepdf

1、对于不能通过npm install安装的,需要去官网下载打包好的文件,文件夹大概是这个样子的,

 

 

然后在用到的.vue文件中引入就ok了

   创建一个展示pdf的容器 <div  id="mycanvas" ref="mycanvas"></div>

   引入import pdf from '../../../lib/pdf/build/pdf'

   创建一个解析pdf的方法,如果后台返回pdf的base64,

async showBase64Pdf() {
let base64 = this.pdfDataList
let pdfjsLib = pdf
pdfjsLib.PDFJS.workerSrc = AppConst.STATIC_FILE + '/lib/pdf/build/pdf.worker.js' //这里根据自己项目路径引入
let decodedBase64 = window.atob(base64) //使用浏览器自带的方法解码

let pdf12 = await pdfjsLib.getDocument({ data: decodedBase64 }) //返回一个pdf对象
let pages = pdf12.numPages //声明一个pages变量等于当前pdf文件的页数
for (let i = 1; i <= pages; i++) { //循环页数
let container = document.getElementById('mycanvas')
let canvas = document.createElement('canvas')
let page = await pdf12.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象
let scale = (container.offsetWidth / page.view[2]); //缩放倍数,1表示原始大小
let viewport = page.getViewport(scale);
let context = canvas.getContext('2d'); //创建绘制canvas的对象
canvas.height = viewport.height; //定义canvas高和宽
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext)

canvas.className = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas
container.appendChild(canvas) //插入到pdfList节点的最后
}
},

如果后台返回一个pdfURL

async showURLPdf() {
let base64 = this.pdfDataList
let pdfjsLib = pdf
pdfjsLib.PDFJS.workerSrc = AppConst.STATIC_FILE + '/lib/pdf/build/pdf.worker.js' //这里根据自己项目路径引入

let pdf12 = await pdfjsLib.getDocument(url) //这里也可以接收一个pdf文件的链接
let pages = pdf12.numPages //声明一个pages变量等于当前pdf文件的页数
for (let i = 1; i <= pages; i++) { //循环页数
let container = document.getElementById('mycanvas')
let canvas = document.createElement('canvas')
let page = await pdf12.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象
let scale = (container.offsetWidth / page.view[2]); //缩放倍数,1表示原始大小
let viewport = page.getViewport(scale);
let context = canvas.getContext('2d'); //创建绘制canvas的对象
canvas.height = viewport.height; //定义canvas高和宽
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext)

canvas.className = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas
container.appendChild(canvas) //插入到pdfList节点的最后
}
},

 

1、对于能通过npm install安装的,就很简单

安装好后,在需要预览pdf的页面引入

import pdf from 'vue-pdf'

创建组件

<pdf v-for="item in numPages" :key="item" :src="pdfsrc" :page="item" />

 

加载pdf的方法

loadPdf(url) {
     this.pdfsrc = pdf.createLoadingTask(url)
     this.pdfsrc.promise.then((pdf) => {
     this.numPages = pdf.numPages // 这里拿到当前pdf总页数
})
},

 

标签:canvas,vue,预览,await,let,pdf,page,viewport
From: https://www.cnblogs.com/sgdkg/p/16776043.html

相关文章

  • 预览附件
    usingKingdee.BOS.ServiceHelper.FileServer;JSONObjectwebobj=newJSONObject();stringticks=DateTime.Now.Ticks.ToString();......
  • Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用
    在《基于vite创建vue3项目》一文中整合了pinia,有不少伙伴不知道pinia是什么,本文简单介绍pinia。主要包括三方面:pinia的基本用法,在《基于vite创建vue3项目》......
  • VUEe 插件收集
    VsCode插件清单代码提示  Vue2SnippetsVetur插件让vue文件代码高亮VueVSCodeSnippets自动生成vue模板内容插件LiveServer实时刷新网页BracketPairColorizer彩......
  • vuepress 搭建组件库文档
    项目地址项目地址:https://github.com/YolandaKisses/YolandaKisses.github.io演示地址:https://yolandakisses.github.io/目录结构├─docs│└─.vuepress│ ......
  • vue中如何使用定义好的变量设置css样式
    前言在做项目的时候,通常会遇到需要在HTML标签上绑定变量来设置样式,对于这种需求,共有两种情况。实现第一种情况如果是对于代码中实实在在存在的HTML标签,我们可以直......
  • 如何在 Mac 上轻松编辑、批注、签名和标记 PDF?
    Mac平台有许多PDF编辑器。今天这篇文章,我们将使用Readdle的PDFExpert。PDFExpert在Mac上提供完整的PDF编辑体验。该软件允许您旋转、删除PDF页面、突出显示单......
  • Vue系列---【at Socket.writeAfterFIN [as write] (net.js:441:14) at PoolWorker
    1.问题描述:前端是vue项目,打包和打镜像的时候,本地没问题,jenkins物理机打流水线也没问题,但是到容器云平台使用自带的流水线打包打镜像的时候,就报错了。上次成功上线的代......
  • Vue3 Echarts 3D柱状图搭建
    最近学习大数据,需要数据可视化,所以特地去学习了一下echarts,通过springboot+vue整合了echarts三维柱状图。先看效果。  因为我是初学vue脚手架,对一些vue内置方法不是......
  • vue前端
       代码//在body标签中<divid="app">{{message}}</div>varapp=newVue({el:'#app',data:{message:'HelloVue!'}}) ......
  • vue项目打包assets资源找不到
    问题描述:assets资源打包多了路径ststic/css解决方式:修改build文件夹下面的util.js文件if(options.extract){returnExtractTextPlugin.extract({use:......