使用js将HTML页面转成pdf

生成pdf文件

    var downPdf = document.getElementById("renderPdf");downPdf.crossOrigin = "Anonymous";downPdf.onclick = function () {html2canvas(//转换id为export_content的div中的所有内容为pdfdocument.getElementById("export_content"),{dpi: 172,//导出pdf清晰度onrendered: function (canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//pdf页面偏移var position = 0;//html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）var imgWidth = 595.28;var imgHeight = 592.28 / contentWidth * contentHeight;console.log(canvas);var pageData = canvas.toDataURL('image/jpeg', 1.0);console.log(pageData);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();}}}pdf.save('content.pdf');},//背景设为白色（默认为黑色）background: "#fff"})}

图片转base64方法：


//url转basefunction changeUrl(){//这是网上的一张图片链接var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";alert(url);//这是一个异步方法，需要等图片执行完毕才会转换getBase64(url).then(function(base64){console.log(base64);//处理成功打印在控制台},function(err){console.log(err);//打印异常信息});}//传入图片路径，返回base64function getBase64(img){function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL;}var image = new Image();image.crossOrigin = 'Anonymous';image.src = img;var deferred=$.Deferred();if(img){image.onload =function (){deferred.resolve(getBase64Image(image));//将base64传给done上传处理}return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']}}

注：

1.导出为pdf文件时表格线没有，可以在下载pdf前按一下Ctrl+0
2.网页上的图片在pdf中没有展示出来，可以在网页加载的时候，将图片转换成base64格式放到src=“”处，这个方法采用的是异步方法，无法实时加载，在进入网页的时候，需要加载一段时间。
代码如下：

function changeUrl1(url){//这是网上的一张图片链接// var url="http://localhost:8099/smartsite1_war_exploded/core/shell/images/background.png";var imgObj1 = [];getBase64(url).then(function(base64){console.log(base64);//处理成功打印在控制台将转换完成的图片放到地址上imgObj1.push('<div class="imgClass"><img style="width:280px;height:300px" src="' + base64 + '"></div>');var imgStr1 = imgObj1.join("");//将图片放到id为IMG1的div处$("#IMG1").html(imgStr1);},function(err){console.log(err);//打印异常信息});}

3.在转换图片的时候，可能会遇到跨域问题，需要配置服务器的Nginx设置：

http {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

使用js将HTML页面转成pdf相关推荐

jquery将html转为pdf文件,HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解
本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.目的:在前段是 jQuery库或 ...
vue项目 - 实现页面打印成PDF格式
现在要实现功能为:将写好的页面.打印成PDF格式代码实现 1.首先安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片 ...
echart转换成pdf js_【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页...
1.目的:在前段是 jQuery库或者 VUE库或者两者混合库,将html 页面和数据转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
网页html转为pdf,html页面转换成PDF文件
html页面转换成PDF文件发布时间:2020-06-14 05:24:50 来源:51CTO 阅读:523 作者:robinmars package pdftest; import java.io ...
Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个ExcelApplicationClass ExcelApp = New ApplicationC ...
js将页面转成PDF文档
<!DOCTYPE html> <html><head><title>jsPDF插件</title><meta http-equiv= ...
html页面转换成pdf
一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...
使用JavaScript将当前页面保存成PDF，支持图片和文字的保存
前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. ...
html页面转成PDF，PDF下载
先说要完成的功能:把填写好的信息转换成PDF文件,并且下载到本地,类似在智联上下载自己的简历,不过下载下来是PDF文件. 参考了网上的多篇博客,发现有两种方法,但两种方法都各有利弊.下边介绍这两种方法 ...

使用js将HTML页面转成pdf

生成pdf文件

图片转base64方法：

注：

使用js将HTML页面转成pdf相关推荐

最新文章

热门文章