vue框架实现pdf在线预览
记录下实现pdf预览展示的坑,刚开始使用vue-pdf在本地运行是可以展示的,但是发布测试环境展示不出来
报以下错误:
网上找的的是:
网上搜到的解决方法
但是我看半天不知道怎么解决,然后换pdfjs-dist插件
安装
npm install pdfjs-dist --save
引入
import PDFJS from "pdfjs-dist";
console.log(PDFJS) //undefined
打印PDFJS返回undefiend
解决办法
删掉前面一个小尖括号,就能安装指定的依赖包了,然后项目就能正常运行了。
打印PDFJS返回一个对象
实现代码
<template><div><canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas></div>
</template>
<script>
import PDFJS from "pdfjs-dist"
export default {data() {return {pdfUrl: './pdf/demo.pdf',pdfDoc: null,pages: 0,}},created() {this.loadFile(this.pdfUrl)},methods: {loadFile (url) {PDFJS.getDocument(url).then((pdf) => {this.pdfDoc = pdfthis.pages = this.pdfDoc.numPagesthis.$nextTick(() => {this.renderPage(1)})})},renderPage (num) {this.pdfDoc.getPage(num).then((page) => {let canvas = document.getElementById('the-canvas' + num)let ctx = canvas.getContext('2d')let dpr = window.devicePixelRatio || 1let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1let ratio = dpr / bsrlet viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.style.width = viewport.width + 'px'canvas.style.height = viewport.height + 'px'ctx.setTransform(ratio, 0, 0, ratio, 0, 0)let renderContext = {canvasContext: ctx,viewport: viewport}page.render(renderContext)if (this.pages > num) {this.renderPage(num + 1)}})}}
}
</script><style lang="less" scoped>
canvas {display: block;
}
</style>
vue框架实现pdf在线预览相关推荐
- vue移动端pdf在线预览,并实现手势缩放、移动
通常我们会遇到ios手机不能下载文件的问题,那是因为苹果手机的拦截机制,这时我们只能通过别的方法来解决问题,我这里的解决方法是直接实现在线预览 pdf预览跟图片预览不同,pdf可能会有多张,而图片只有 ...
- vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...
- html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- PDF在线预览插件touchPDF.js:手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
- 前端实现pdf在线预览
概述:pdf在线预览,包括PC端浏览器.IOS.Android,开发过程中遇到的问题及解决方案 [1]iframe 直接打开pdf文件(可用于PC端) <iframe src="pdf ...
- java实现word转pdf在线预览格式
java实现word转pdf在线预览格式 前段时间的项目里涉及了此功能,调研过一些方案,踩过一些坑,一一总结在此. java转pdf的方案很多,但是很多都要收费,转pdf也有一些格式方面的问题. 方案 ...
- html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
- Java 实现word pdf在线预览
Java 实现word pdf在线预览 最近项目有这个需求,查找了一些资料,在这整理一下. 首先,pdf的文件,浏览器本身支持预览,不需要做什么处理. controller: 简单说下思路:就是利用i ...
最新文章
- linux的QQ浏览器里微信,移动端微信内置浏览器(或QQ浏览器)无法识别onclick事件的问题解决...
- 数据由SqlServer2008转移到MySQL的一个方法
- FPGA开发中全局复位置位(GSR)
- Google Map API V3调用arcgis发布的瓦片地图服务
- 使用Notepad++ 删除非连续的列内容操作实例
- 如何理解拓扑排序算法(转)
- 解决问题的能力 10倍程序员
- Luogu2439 [SDOI2005]阶梯教室设备利用 (动态规划)
- quick time不可用是什么意思_fpga是什么意思(fpga怎么用)
- nvidia-docker2 在 Kubernetes 上实践
- java建立新文件保存数据_关于java中创建文件,并且写入内容
- Spring Boot+Vaadin 14项目初始化
- 取消button的点击效果_(Vue动效)6.Vue中列表过渡效果
- 菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven)
- 017年美国大学生数学建模竞赛E题优秀论文解读
- 实战篇:VMware Workstation 虚拟机安装 Linux 系统
- php 对象教程,创建一个简单的PHP对象_PHP教程
- 如何获取当前地址以及天气温度情况,适用于微信小程序(端午假期将至,祝愿大家端午快乐)
- 如何从零开始搭建直播平台,从flash时代的rtmp到过渡期的flv和webrtc的未来以及简单聊聊webassmbly
- 独立显卡linux安装教程,linux 安装meshlab并且指定使用独立显卡