js提取指定网站内容(网页生产pdf或者截取某个标签生产有什么区别？ )

　　js提取指定网站内容(网页生产pdf或者截取某个标签生产有什么区别？

)

　　截取网页截图生成pdf或截取标签生成pdf，

　　截图是使用插件 html2canvas.js 脚本截取的，

　　代码很简单（因为没有深入研究，所以不清楚这个插件有没有bug。使用html2canvas对整个页面或部分页面进行截图。但这不是真正的截图，而是通过遍历页面的DOM结构将一个集合所有的元素信息和对应的样式渲染成一个canvas图片，html2canvas只能生成一个自己可以处理的canvas图片，所以渲染出来的结果不是100%和原来的一致。但是它不需要服务器参与，整个图片由客户端提供，由浏览器生成，使用非常方便。）

　　代码：

　　 $("#printScreen").click(function () {//截图,某一个标签，要是想全屏的话就直接把"document.querySelector("#div")"替换成"document.body"

html2canvas(document.querySelector("#div"), { //截图对象

//此处可配置详细参数

onrendered: function(canvas) { //渲染完成回调canvas

canvas.id = "mycanvas";

// 生成base64图片数据

var dataUrl = canvas.toDataURL(); //指定格式，也可不带参数

}

});

});

　　生成的dataUrl是base64图像数据，下一步就是从图像生成pdf。

　　生成pdf有两种方式

　　1.将生成的图片转移到后台，使用java将图片转为pdf

　　前端代码：

　　 $("#printScreen").click(function () {//截图,某一个标签，要是想全屏的话就直接把"document.querySelector("#div")"替换成"document.body"

html2canvas(document.querySelector("#div"), { //截图对象

//此处可配置详细参数

onrendered: function(canvas) { //渲染完成回调canvas

canvas.id = "mycanvas";

// 生成base64图片数据

var dataUrl = canvas.toDataURL(); //指定格式，也可不带参数

var formData = new FormData(); //模拟表单对象

formData.append("file", convertBase64UrlToBlob(dataUrl), "a.png"); //写入数据

var xhr = new XMLHttpRequest(); //数据传输方法

xhr.open("POST", "/fileupload"); //配置传输方式及地址

xhr.send(formData);//发送

}

});

}); //将以base64的图片url数据转换为Blob

function convertBase64UrlToBlob(urlData){

//去掉url的头，并转换为byte

var bytes=window.atob(urlData.split(',')[1]);

//处理异常,将ascii码小于0的转换为大于0

var ab = new ArrayBuffer(bytes.length);

var ia = new Uint8Array(ab);

for (var i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob( [ab] , {type : &#39;image/png&#39;});

}

　　后端收到的代码（和普通文件上传一样）：文件上传和下载

　　上传图片后，将图片格式转换为pdf格式。这里需要用到包iText-1.3.jar

　　转换后的代码：

　　 String filePath = "d:"+File.separator+ "temp" + File.separator + "aa.png";

String pdfPath = "d:"+File.separator+ "temp" + File.separator + "aa.pdf";

BufferedImage img = ImageIO.read(new File(filePath));

FileOutputStream fos = new FileOutputStream(pdfPath);

Document doc = new Document(null, 0, 0, 0, 0);

doc.setPageSize(new Rectangle(img.getWidth(), img.getHeight()));

Image image = Image.getInstance(filePath);

PdfWriter.getInstance(doc, fos);

doc.open();

doc.add(image);

doc.close();

　　2. 前端直接转成pdf文件，使用js插件jsPdf.debug.js

　　配合html2canvas.js插件使用，代码如下：

　　$("#printScreenAndGetPdf").click(function () {//截图

html2canvas(document.querySelector("#div"), { //截图对象

//此处可配置详细参数

onrendered: function(canvas) { //渲染完成回调canvas

canvas.id = "mycanvas";

// 生成base64图片数据

var dataUrl = canvas.toDataURL(); //指定格式，也可不带参数

// 三个参数，第一个方向，第二个单位，第三个尺寸格式(转化成pdf对象)

var doc = new jsPDF(&#39;landscape&#39;,&#39;pt&#39;,[300, 100]);

doc.addImage(dataUrl, &#39;PNG&#39;, 0, 0, 300, 100);

doc.save(&#39;aa.pdf&#39;);//生产pdf文件

}

});

});

前端打印的代码：

$("#print").click(function () {//打印，某一个标签

document.body.innerHTML=document.getElementById(&#39;div&#39;).innerHTML;//把这句去掉就是打印这个页面

window.print();

});