深入浅出vuejspdf下载_vue下载pdf
pdf功能下载,相信只要是开发,都遇到过这个功能,直接上代码:
使用此方式时,vue需要安装模块:
npm install html2canvas jspdf --save
downPdf() {
var that = this;
var target = document.getElementById("policy-information");//policy-information是html的id信息
//target.style.background = "#FFFFFF";
html2canvas(target, {
"imageTimeout": 0,
'scale': 2,
}).then(canvas => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jspdf('', 'pt', 'a4');
//有两个高度需区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if(leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
var name = 'content-' + new Data().getTime() + '.pdf'; // 定义生成的pdf的文件名字
pdf.save(name);
});
},
以上代码会有一写问题,会导致内容丢失。
说明一下我们的项目。左侧是菜单栏,头部也有一个菜单栏,单机下载功能,会导致导出的左侧数据丢失部分(左侧菜单的宽度)。
目前解决方案是:单机下载之前,先把左侧按钮缩回去,然后再下载。后续研究下如何处理
深入浅出vuejspdf下载_vue下载pdf相关推荐
- pdf阅读器下载支持win7_福昕PDF阅读器(Foxit Reader)下载|福昕PDF阅读器(Foxit Reader) 9.6.1.25160 官方版...
小编留意过关于这款软件的反馈意见,可能大部分都不是软件的问题,而是很多网站并没有把好用的版本上传,还有用户电脑适配的问题,这些需要多有留意. 福昕PDF阅读器(Foxit Reader)功能特色: 软 ...
- net中c#教程 如何创建、合并、下载、打印pdf文件?
net中c#操作pdf文档,有很多插件可以使用,这里推荐其中的一个,名字叫iTextSharp,Nuget直接搜就可以找到.它能够创建与合并pdf文件.至于下载和打印pdf文件,则是通过其他方法完成的 ...
- 谷歌AI论文BERT双向编码器表征模型:机器阅读理解NLP基准11种最优(公号回复“谷歌BERT论文”下载彩标PDF论文)
谷歌AI论文BERT双向编码器表征模型:机器阅读理解NLP基准11种最优(公号回复"谷歌BERT论文"下载彩标PDF论文) 原创: 秦陇纪 数据简化DataSimp 今天 数据简化 ...
- 【如何在知网下载学位论文PDF版本】
** [如何在知网下载学位论文PDF版本] ** 前提:能登录知网下载文章!!! caj文件不方便阅读,那不如另寻他路,找PDF文件. 看图说话: 最后,点击下载. 最后,感谢这篇文章的作者.
- C# 访问ftp地址下载jpg、pdf、文件夹
1.无密码访问ftp地址下载jpg.pdf.文件夹 /// <summary>/// 无密码访问ftp地址/// </summary>/// <param name=&q ...
- 如何使用【亿愿专利下载器】批量下载美国专利的PDF全文
[亿愿专利下载器]可以轻松批量下载美国专利的PDF全文!使用方法如下: 1.运行[亿愿专利下载器],点击主界面的"美国专利检索.分析.批量下载"图标 2.进入美国专利检索分析窗口, ...
- Android下载并打开PDF文件
1.下载PDF文件到本地 private void downFile(){String urlString = "http://14.215.72.79/file3.data.weipan. ...
- JS使用技巧-如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题?
问题描述: 页面下载跨域的图片.pdf文件,浏览器总是自动打开,并且在下载列表里面不显示. 如何解决谷歌浏览器下载图片.PDF文档时只打开不下载的问题?如何变成直接下载? 解决方法: 使用js获取下载 ...
- 半自动化批量下载专利全文pdf傻瓜攻略
半自动化批量下载专利全文pdf傻瓜攻略 写在前面 适合人群 使用前提 基本思路 键鼠记录器脚本 前期准备 脚本原理 注意事项 检查下载效果 写在前面 整理专利的时候,在专利引擎上只能一条条的下载,很是 ...
- 黄智生教授:大数据时代的语义技术(公号回复“黄智生语义技术”下载彩标PDF论文)
黄智生教授:大数据时代的语义技术(公号回复"黄智生语义技术"下载彩标PDF论文) 原创: 黄智生 数据简化DataSimp 今天 数据简化DataSimp导读:介绍面向大数据环境的 ...
最新文章
- DL之CNN:卷积神经网络算法应用之卷积神经网络实践技巧(DA/DP/WI/BN/H/O/R)、优化技术经验之详细攻略
- linux 块设备驱动 (三)块设备驱动开发
- 使用tensoflow serving来部署模型推理节点
- 当我们在谈论技术时,技术的本质和价值究竟是什么?
- 用备份进行Active Directory的灾难重建
- putty秘钥转换成xhell支持的格式
- 大搜车:云上多地域高可用消息系统的构建 | 凌云时刻
- Linux学习笔记:wc查看文件字节数、字数、行数
- 在中国从事什么职业最赚钱_中国最好的十大职业2(转)
- 普通微型计算机就是多媒体计算机,6-多媒体技术试题
- SketchUp插件|自然散射 (Skatter 2)插件最新版免费下载及介绍(草图大师模型散布)
- DelayQueue用例
- 文件怎么复制到虚拟机中的linux系统吗,Windows下的文件如何复制到虚拟机的Linux中...
- matlab求解零输入响应,matlab求解零状态零输入响应
- C++ GBD调试
- 乐视X520(乐2 全网通)一键刷机教程
- 月均播放超2.8亿,vlog会是品牌B站推广新风口吗?
- C:1134字符串转换
- Java银行柜员业务绩效考核系统(含源码+论文+答辩PPT等)
- ICG试剂 ICG-PEG-NHS,ICG-PEG-SE光谱图分享