vue使用canvas渲染pdf

1.原生方法

<div><div class="bottom" style="position: fixed;right: 0"><input class="pdf-zoom" type="submit" value="+" @click="zoomPdf(1)"/></br><input class="pdf-zoom" type="submit" value="-" @click="zoomPdf(0)"/>
</div><div id="canvasEle"></div>
</div>pdfContent: {canvasEle: '', // 渲染pdf的元素detail: '', // pdf详情scale: 1 // 放缩比例},this.pdfContent['canvasEle'] = document.getElementById("canvasEle");this.pdfContent['detail'] = res.data;this.loadPdf(this.pdfContent, 0);/*** pdf放大/缩小*/zoomPdf(num) {const pObjs = this.pdfContent.canvasEle.childNodes;for (let i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试this.pdfContent.canvasEle.removeChild(pObjs[i]);}if (num) {this.pdfContent.scale = this.pdfContent.scale + 0.5;} else {this.pdfContent.scale >  1 ? this.pdfContent.scale = this.pdfContent.scale - 0.5 : ''}this.loadPdf(this.pdfContent);},/*** 加载pdf*/async loadPdf(pdfContent, flag){const pdfData = atob(pdfContent.detail)pdfjsLib.GlobalWorkerOptions.workerSrc ='https://cdn.jsdelivr.net/npm/pdfjs-dist@2.4.456/build/pdf.worker.js';const loadingTask = pdfjsLib.getDocument({ data: pdfData, });const pdf = await loadingTask.promise;for (let i = 1; i < pdf.numPages + 1; i++) {const page = await pdf.getPage(i);let viewport = page.getViewport({ scale: pdfContent.scale });this.proportion = this.clientWidth / viewport.width;if (flag === 0) {this.pdfContent.scale = this.pdfContent.scale * this.proportion;viewport = page.getViewport({ scale: pdfContent.scale });}let canvas = document.createElement('canvas');let context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: context,viewport,};pdfContent.canvasEle.appendChild(canvas);page.render(renderContext);}}

2.使用vue-pdf

（1）安装

npm install --save vue-pdf

（2）基本使用

<template>
<div class="pdf"><pdf ref="pdf":src="pdfUrl"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {name: 'Pdf',components:{pdf},data(){return {pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",}}
</script>

vue使用canvas渲染pdf相关推荐

前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
通过pdfjs-dist批量渲染在页面渲染pdf
核心逻辑通过pdfjs-dist渲染pdf页面,如果基于Vue-Cli脚手架搭建的Vue项目,需要根据Vue-Cli的版本找到对应的pdfjs-dist版本.由于最新版本的pdfjs-dist 使用 ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...
实现Vue移动端的PDF预览
最近做到一个功能,PDF预览:这个功能看着蛮简单的,结果搞了两个下午,真是欲哭无泪.记录一下所查到的预览方法. 我在网上找了蛮多教程的,大致都是以下几个方法实现预览: 使用 iframe 标签使用 ...
Vue导出页面为pdf
1.安装 npm install --save html2canvas //html转换成图片 npm install jspdf --save //图片生成pdf 2.创建一个htmlToPdf.j ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
生成证书模板---vue实现HTML转PDF
文章目录 1.下载插件模块 2.定义功能实现方法 3.全局引入实现方法 4.在相关要导出的页面中,点击时调用绑定在vue原型上的getPDF方法自动生成证书并且导出PDF格式 1.下载插件模块 np ...
vue项目中页面生成pdf并下载，vue 中页面转PDF
方法一第一步.安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf -- ...

vue使用canvas渲染pdf

1.原生方法

2.使用vue-pdf

（1）安装

（2）基本使用

vue使用canvas渲染pdf相关推荐

最新文章

热门文章