利用html2canvas 和 jspdf 实现html转pdf html转图片

最新推荐文章于 2024-06-06 15:22:56 发布
最新推荐文章于 2024-06-06 15:22:56 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： html转pdf或图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzq199528/article/details/89709672
版权

利用html2canvas 和 jspdf 实现html转pdf

let dom = document.getElementById("pdf");
		html2canvas(dom).then(canvas => {
		let url = canvas.toDataURL("image/png",1);
		// let imgHtml = new Image();
		// imgHtml.src = url;
		// dom.innerHTML = '';
		// dom.appendChild(imgHtml)
		let pdf = new jsPDF('', 'pt', 'a4');
		pdf.addImage(url, 'png', 10, 60)
		pdf.save('www.pdf');
		});

注释的部分是转图片

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>个人简历</title> 
  <style>
#title{
color:#F00;
font-size:28px
}
.secondTitle{


font-size:18px;
background-color:#09F;
text-align:center;
}


body{ 
text-align:center;
font-size:16px;
font-family:SimSun;

}
ul{
text-align:left;}
li{
text-align:left;}
.info{
text-align:left;
font-size:16px;
}
td{
border-color:#09F;
}
tr{
border-color:#09F;}

</style> 
  <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script> 
  <script type="text/javascript">
     function HtmlToPdf(){
		let dom = document.getElementById("pdf");
		html2canvas(dom).then(canvas => {
		let url = canvas.toDataURL("image/png",1);
		// let imgHtml = new Image();
		// imgHtml.src = url;
		// dom.innerHTML = '';
		// dom.appendChild(imgHtml)
		let pdf = new jsPDF('', 'pt', 'a4');
		pdf.addImage(url, 'png', 10, 60)
		pdf.save('www.pdf');
		});
	 }
</script> 
 </head> 
 <body> 
  <strong onclick="HtmlToPdf()"> 转储pdf </strong> 
  <table id="pdf" align="center" width="660" border="0" bordercolor="#00CCFF" frame="box"> 
   <caption id="title"> 
    <strong> 个人简历</strong> 
   </caption> 
   <tbody> 
    <tr> 
     <td colspan="5" class="secondTitle">基本资料</td> 
    </tr> 
    <tr> 
     <td width="116">姓&nbsp;名</td> 
     <td width="134">刘志强</td> 
     <td width="79">性&nbsp;别</td> 
     <td width="166">男</td> 
     <td width="129" rowspan="5"><img src="./25731425.jpg" width="105" height="150" alt="1" /></td> 
    </tr> 
    <tr> 
     <td>年&nbsp;龄</td> 
     <td>24</td> 
     <td>籍贯</td> 
     <td>汉族</td> 
    </tr> 
    <tr> 
     <td>民&nbsp;族</td> 
     <td>汉</td> 
     <td>政治面貌</td> 
     <td>团员</td> 
    </tr> 
    <tr> 
     <td>毕业学校</td> 
     <td colspan="3">临沂大学</td> 
    </tr> 
    <tr> 
     <td>专&nbsp;业</td> 
     <td>软件技术</td> 
     <td>学&nbsp;历</td> 
     <td>专科</td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">个人技能</td> 
    </tr> 
    <tr> 
     <td>个人技能</td> 
     <td colspan="4"> 
      <ul> 
       <li>熟练掌握Java</li> 
       <li>熟练掌握Linux系统和docker等技术</li> 
       <li>熟练掌握svn,git,maven等技术</li> 
       <li>熟练掌握idea,myeclipse等开发工具</li> 
       <li>熟练掌握spring struts hibernate，springMvc,springBoot,springcloud,Mybatis,Lavavel 等各种服务端框架</li> 
       <li>基础掌握asp php</li> 
       <li>熟练掌握SQl Server,mysql,redis,memcached等关系型非关系型数据库</li> 
       <li>熟练掌握react vue html js jquey css 等前端技术</li> 
       <li>熟练掌握jsp freemarker velocity等模板技术</li> 
      </ul> </td> 
    </tr> 
    <tr> 
     <td>个人专长</td> 
     <td colspan="4" class="info"> 逻辑能力学习能力强，热爱学习掌握新的技术 </td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">项目经验</td> 
    </tr> 
    <tr> 
     <td>年月</td> 
     <td>项目名称</td> 
     <td colspan="3">项目说明</td> 
    </tr> 
    <tr> 
     <td>2013年</td> 
     <td>学生管理系统</td> 
     <td colspan="3"> 实现管理员登录注册<br /> 实现学生的增删改查 </td> 
    </tr> 
    <tr> 
     <td>2014年</td> 
     <td>二手房交易系统</td> 
     <td colspan="3"> 实现用户的注册登录<br /> 实现管理员帐号<br /> 实现用户购买寄售房屋 房屋信息的显示（分页）<br /> </td> 
    </tr> 
    <tr> 
     <td>2015年</td> 
     <td>捕鱼达人</td> 
     <td colspan="3"> 捕鱼达人基本功能的实现 </td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">实践与实习</td> 
    </tr> 
    <tr> 
     <td>2011.6-2012.9</td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td>2012.6-2013.9</td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td>2014.6-2015.9</td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td>2015.9-2015.1</td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">个人爱好</td> 
    </tr> 
    <tr> 
     <td>兴趣爱好</td> 
     <td colspan="4">游戏、篮球</td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">自我评价</td> 
    </tr> 
    <tr> 
     <td colspan="5"> </td> 
    </tr> 
    <tr> 
     <td colspan="5" class="secondTitle">联系方式</td> 
    </tr> 
    <tr> 
     <td>移动电话</td> 
     <td>157***</td> 
     <td>QQ</td> 
     <td colspan="2">450**</td> 
    </tr> 
    <tr> 
     <td>e-mail</td> 
     <td>xiaoshidebukuai@163.com</td> 
     <td>CSDN</td> 
     <td colspan="2">xiaoshidetaikuai20</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>
lzq199528
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端将pdf转为图片，拿来即用
weixin_45455337的博客
06-01 1482
一般情况下，pdf转图片都是后端来做的，但是前端也可以实现他。通过pdfjs和一些js代码就可以轻松实现。以下是完整的实现代码。
前端生成pdf之html2canvas+jsPDF，以及解决图片不显示bug
weixin_45748897的博客
01-08 2296
开发背景： 需要给页面中相应的内容生成pdf，查找文档后发现要用到两个插件。html2canvas 以及 jsPDFjsPDF参数下面是dom转化为pdf 的基本代码需要特别注意一下 html2canvasonclone方法。它是当DOM被克隆后进行渲染时的回调函数，可用于修改将要渲染的内容，而不会影响原始DOM。当你需要在生成快照前操作 DOM（例如隐藏打印按钮）时，会非常有用。
使用jspdf将html页面生成pdf文件
最新发布
m0_68937827的博客
06-06 584
/ name：保存的文件名称；this.$refs.outputReportPDF：要输出成pdf的总模块；this.$refs.outputReportPDFItem：总模块中的每个item,用于判断是否需要在换页时加个空白框隔开。// 等最后一张图片在页面中加在完再输出成pdf，要不然pdf文件里的图片会不显示。2、在utils文件夹下创建一个单独的文件（名字无具体要求）// el-image加在完图片时触发。1、下载jspdf插件包。// 引入刚才创建的文件。'从后端获取到的数据'
前端PDF文件转图片方法（你值得收藏）
xxjiushini的博客
11-03 5194
前端PDF文件转图片方法（你值得收藏） 第一步：先下载pdfjs，网址：PDF下载地址，再引入到项目中，我是标签直接引用的 <script src="pdfjs/build/pdf.js"></script> <script src="pdfjs/build/pdf.worker.js"></script> 注意：两个都要引进来 第二步：html代码添加两行代码，一个是canvas用来绘图，一个是img用来最后展示转换后的pdf图片 <body>
jspdf用法
热门推荐
weixin_42333548的博客
07-28 5万+
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置 jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。 官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/ 1、安装：npm install jspdf 2、引入：import jsPDF from "jspdf" 3、使用： let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); 第一..
Html转PDF，前端JS实现Html页面导出PDF（html2canvas+jspdf）
qq_45830276的博客
12-10 9936
当我们在不想改变后端代码的同时想是纯html页面导出PDF，那么（html2canvas+jspdf）就是无疑最好的选择，导出时它不占用我们服务器的资源，而是由用户本地自行执行js文件下载PDF，不占用我们系统的带宽，所以这无非是最好的选择方式
Html转pdf 页面直接完成 无需后台 html2canvas+ jsPdf
09-28
本篇将详细讲解如何利用html2canvas和jsPdf两个JavaScript库在前端实现这一功能，以及解决过程中遇到的一些问题。 首先，html2canvas是一个非常实用的JavaScript库，它能够将HTML元素转换为Canvas图像。其基本原理...
html2canvas.js 和 jspdf.debug.js
10-18
然而，HTML2canvas并不支持所有HTML特性，比如跨域图像和某些CSS3属性，但它仍然是一个强大的工具，适用于大多数基本的HTML到Canvas的转换需求。 jspdf.debug.js 是一个轻量级的JavaScript PDF生成器，它允许开发者...
使用js下载pdf所需js资源（html2canvas 和 jsPDF）
04-21
在这个场景下，`html2canvas` 和 `jsPDF` 这两个JavaScript库就显得尤为重要。本文将详细解析这两个库的功能、用法及其结合使用创建PDF文档的过程。 `html2canvas` 是一个JavaScript库，它能够将HTML元素渲染成...
Javascript实现html转pdf高清版（提高分辨率）
10-15
接下来，利用 html2canvas 生成的 Canvas，计算合适的页面尺寸，然后使用 jsPDF 库将图片添加到 PDF 文件中： ```javascript var contentWidth = canvas.width; var contentHeight = canvas.height; var pageHeight...
纯js实现html转pdf的简单实例(推荐)
10-20
这个过程主要依赖两个JavaScript库：`html2canvas`和`jsPDF`。 `html2canvas`是一个非常有用的库，它能够将HTML元素渲染到Canvas上。不过，它不支持直接处理SVG元素，所以我们需要用到`canvg`，这是一个将SVG内容...
html2canvas.js 和jsPdf.debug.js
09-07
运用jquery将html转换为pdf所用到的插件。 jspdf.debug.js和html2canvas.js
基于html2canvasjspdf导出更加清晰的图片以及pdf
08-10
基于html2canvas jspdf导出更加清晰的图片以及pdf
pdf.js转pdf为图片展示 兼容手机端查看pdf
07-24
在微信浏览器无法展示pdf的问题，将pdf转为图片展示。
jsPDF使用及注意点记录
pia_ji的博客
07-07 1万+
说明 jsPDF可以将H5转成PDF(其他文件流也可) 实现思路 内容不内容截断问题 1.获取DOM 2.将DOM转换为canvas 3.获取canvas的宽度、高度（稍微大一点，预览） 4.将pdf的宽高设置为canvas的宽高（不适用A4纸大小） 5.将canvas转为图片 6.实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题） 如截断则设置A4纸大小即可 代码 /** target 容器 pdfName 文件名 */ function exp
html2canvas和jspdf实现html导出pdf文件
FE小白的进化之路
01-13 2053
先使用html2canvas对页面进行截图，再使用jspdf将截图生成pdf文件
使用html2Canvas跟jspdf将一部分页面生成PDF
weixin_53959748的博客
07-13 982
刚好碰到这么一个需求，前端需要将后端返回的json对象数据生成表单样式的pdf文件，首次接触所以简单记录一下。经过反复查找大致流程为：现在页面画一个表单=====>拿到数据将数据放表单中=====>给表单最外层加个ref利用html2Canvas生成base64图片=====>最后用jspdf将图片生成pdf。先上个图： 然后将拿到的数据放入表单（表单大家都会吧，我就不往出贴了，放个图好了，主要看下ref的位置，一些其他的样式问题可根据自身需求调整）中 通过引用并调用html2canvas先生成ba
JS将图片转pdf，jspdf的使用
砷碲 - Shendi
06-27 4450
一个用JavaScript生成PDF的库。addImage第一个参数为图片，可以为链接、字节等，第二个参数为图片格式，第三和第四代表图片编写到当前页的哪个位置，第五和第六代表绘制图片的...
JS打印、导出PDF
qq_42660374的博客
03-14 2838
JS打印、导出PDF
html 生成pdf 有空白页_html2canvas + jspdf 实现 html 转 pdf
06-08
是的，可以使用html2canvas和jsPDF来实现html转pdf。html2canvas可以将HTML元素渲染成canvas，而jsPDF可以将canvas转换为PDF文件。 以下是一个简单的示例代码： ```javascript // 引入html2canvas和jsPDF库 import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值