使用html2canvas和jspdf把网页保存pdf并下载

直接上代码，先引入两个插件，jspdf放前面

<script src="/static/js/jspdf.debug.js"></script>
<script src="/static/js/html2canvas.js"></script>

点击下载时调用的方法


// 调用下载
download($("body>div"));/*** 下载* @param content 要保存的dom元素*/
async function download(content) {let indnum = 0;var PDF = new jsPDF('1', 'pt', [1920 * 0.75, 1080 * 0.75])for (let index = 0; index < content.length; index++) {await html2canvas(content[index], {useCORS: true,allowTaint: true,scale: 2 // 提升画面质量，但是会增加文件大小}).then(function (canvas) {/**jspdf将html转为pdf分页，整体思路：* 1. 获取DOM* 2. 将DOM转换为canvas* 3. 获取canvas的宽度、高度（稍微大一点）* 4. 将pdf的宽高设置为canvas的宽高* 5. 将canvas转为图片* 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）*/// 得到canvas画布的单位是px 像素单位var contentWidth = canvas.width;var contentHeight = canvas.height;// 将canvas转为base64图片var pageData = canvas.toDataURL('image/jpeg', 1.0)// 设置内容图片的尺寸，img是pt单位var imgX = (contentWidth) / 2 * 0.75;var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离// 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);if (indnum < content.length - 1) {PDF.addPage();}// 保存下载if (indnum == content.length - 1) {PDF.save('学习资料.pdf')}indnum += 1;}).catch(res => {console.log("下载失败，请重新下载！");})}
}

使用html2canvas和jspdf把网页保存pdf并下载相关推荐

利用html2canvas 和 jspdf 实现html转pdf html转图片
利用html2canvas 和 jspdf 实现html转pdf let dom = document.getElementById("pdf");html2canvas(dom) ...
Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档在上面搭建起 ...
html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断
1.安装html2canvas和JsPdf //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install j ...
H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地
1.需求:长按页面中的一部分(里面有动态获取的用户昵称.头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2.分析:由于有动态获取数据,需等DOM元素生成之后,再将这 ...
vue中将网页以pdf格式下载
1.下载 html2canvas和jspdf 两个插件 yarn add html2canvas jspdf 2.html2canvas 和 jspdf github地址 https://githu ...
网页保存PDF 保留文字删除页面裁剪页面删除不需要的内容
Chrome浏览器打开网页下拉使得所有内容得到加载打印->另存为PDF 如果内容较多较长,可以选择更大的纸张,比如A0 Adobe Acrobat打开下载的pdf 文档->删除页面-& ...
基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
微信长按网页保存为截图
本文是我处理问题时看到的一篇博客,感觉很详细,所以保存了, 原文地址 H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...

使用html2canvas和jspdf把网页保存pdf并下载

使用html2canvas和jspdf把网页保存pdf并下载

使用html2canvas和jspdf把网页保存pdf并下载相关推荐

最新文章

热门文章