这篇文章给大家分享的是有关html怎么转pdf的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
1、准备资源
itext.jar
www.baidu.com
html2canvas.js
www.baidu.com
2、前端代码:
//进行截图操作,document.querySelector("body") 为要截图的区域
function test() {
html2canvas(document.querySelector("body"), {
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL('image/png');
var formData = new FormData(); //模拟表单对象
formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据
var xhr = new XMLHttpRequest(); //数据传输方法
xhr.open("POST", "http://localhost:8080/pdf"); //配置传输方式及地址
xhr.send(formData);
xhr.onreadystatechange = function () { //回调函数
};
}
});
}
//格式化图片base64编码转换为byte文件流
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 s = 0;s<bytes.length;s++){
ia[s] = bytes.charCodeAt(s);
}
return new Blob( [ab] , {type : 'image/png'});
}
<body onclick="test()">//调用截图方法即可
3、后端代码:
@RequestMapping(value = "/pdf",method = RequestMethod.POST)
public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
String filePath = "D:\\blog\\exportPdf2.pdf";
String imagePath = "D:\\blog\\exportImg2.png";
Document document = new Document();
try{
Map getMap = request.getFileMap();
MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据
InputStream file = mfile.getInputStream();
byte[] fileByte = FileCopyUtils.copyToByteArray(file);
FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流
imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件
imageOutput.close();
PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
document.open();
document.add(new Paragraph("JUST TEST ..."));
Image image = Image.getInstance(imagePath); //itext-pdf-image
float heigth = image.getHeight();
float width = image.getWidth();
int percent = getPercent2(heigth, width); //按比例缩小图片
image.setAlignment(Image.MIDDLE);
image.scalePercent(percent+3);
document.add(image);
document.close();
}catch (DocumentException de) {
System.err.println(de.getMessage());
}
catch (Exception e) {
e.printStackTrace();
}
}
private static int getPercent2(float h, float w) {
int p = 0;
float p2 = 0.0f;
p2 = 530 / w * 100;
p = Math.round(p2);
return p;
}
4、包名
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Image;
import com.itextpdf.text.Paragraph;
import com.itextpdf.text.pdf.PdfWriter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import javax.imageio.stream.FileImageOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Map;
5、项目源码地址
https://github.com/zhangjy520/learn_java/tree/master/boot
感谢各位的阅读!关于“html怎么转pdf”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。