html怎么转换byte,html如何转pdf

本篇文章给大家介绍html转pdf的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1、准备资源

itext.jarwww.baidu.com

html2canvas.jswww.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

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

}

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

}

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