html 打印预览 兼容,vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求.
这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机.
所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开pdf文件的表现不太好.如果是在 win7+ie11 的环境下会直接下载文件, 而且直接打开pdf在 ie,firefox,chrome 三大环境下的表现都不太统一.
所以根据需求, 我最开始使用了vue-pdf
安装vue-pdf
npm install --save vue-pdf
新建一个vue,命名为vpdf
import pdf from 'vue-pdf'
export default {
components: {
}
}
3.引入到需要预览的页面使用vpdf标签
import vpdf form 'vpdf';
components: {
vpdf
}
4.npm start 启动
使用vue-pdf很简单, 但是只能预览pdf不能打印,所以我放弃了这个思路.
接下来我尝试了 PDF.js
1.获取当前版本
git clone https://github.com/mozilla/pdf.js.git
2.启动
cd pdf.js
npm install -g gulp-cli
npm install
gulp server
3.访问 http://localhost:8888/web/viewer.html 可以预览和打印pdf,但是这时候要加入到自己的项目,就要编译pdf.js
4.编译
build pdf.js
gulp generic //在src文件夹获取开发版
gulp minified //获取生产版
5.vue-router路由
在vue下直接使用使用pdf.js的viewer.html有一个路径映射的问题,就是在服务器加载不出来,虽然可以把html改成vue模板加载,但是为了省事,我直接把编译好的min文件夹放在了static路径
6.通过带参数的url来访问PDF
http://localhost:8080/generic/web/viewer.html?file=qbs.pdf
参考
http://www.cnblogs.com/kagome2014/p/kagome2014001.html
http://blog.csdn.net/hyhbyl/article/details/20994945
html 打印预览 兼容,vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React相关推荐
- vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
- ElementUI项目使用pdf.js预览pdf文件
最近因为要用Elementui展示pdf文件.查了很多资料,发现vue-pdf还比较初级,不如pdf.js成熟.所以使用的pdf.js. 1.下载pdf.js 点击这里可以[下载]. 2.解压 打开e ...
- 解决pdf.js预览pdf不显示签名问题(两条路)
解决pdf.js预览pdf不显示签名问题(两条路) 解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告.[其实乍一看好像和问题本身并不沾边,哈哈] 电子签章不显 ...
- 计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部署
计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部署 计算机毕业设计springboot基于vue众筹平台系统 aj3l6源码+系统+程序+lw文档+部 ...
- windows和linux系统之间的txt文档兼容问题
windows和linux系统之间的txt文档兼容问题 在给公司做自动化文件同步的测试时,出现的这个问题,因为本地开发的从外网拿同步路径列表的脚本文件没有svn上传.就在windows机器上生成了文件 ...
- java计算机毕业设计vue健康餐饮管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue健康餐饮管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue健康餐饮管理系统设计与实现MyBatis+系统+LW文档+源码+调试部 ...
- JAVA毕业设计Vue网上书籍购买商城登录计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue网上书籍购买商城登录计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue网上书籍购买商城登录计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构 ...
- java计算机毕业设计vue图书档案管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue图书档案管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue图书档案管理系统源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目 ...
- ssm+Vue计算机毕业设计学生在线请假管理系统(程序+LW文档)
ssm+Vue计算机毕业设计学生在线请假管理系统(程序+LW文档) 项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...
最新文章
- iOS开发之绝对布局和相对布局(屏幕适配)
- 损失函数约束类间不一致性
- SAP 不支持交货单中同一个物料多个行项目HU与序列号组合发货场景
- java高并发(六)线程安全性
- 快速沃尔什变换(FWT)
- android 方法参数默认值,Kotlin函数默认值的完全讲解
- 使用 ReSharper对.NET解决方案进行全面重构
- 【keras/Tensorflow/pytorch】Conv2D和Conv2DTranspose详解
- 关于工业相机的基本知识
- 英语学习详细笔记(九)分词
- python判断正数负数_python 负数变正数
- git提交代码步骤和idea中不同颜色代表意义
- GIS开源软件大全(备用)
- 溢出的文字用省略号表示。
- 苹果蓝牙耳机平替哪款最好?四款苹果蓝牙耳机平价替代
- 淘管家一键铺货怎么弄?和分销下单有什么区别?
- Arduino基础入门二之呼吸灯
- Open3D RANSAC拟合空间直线
- OPenGL--Transform feedback示例解析
- 如何判断一个网站是WordPress搭建的网站以及网站SEO网络推广