html如何转pdf

ID:9570 / 打印

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

html如何转pdf

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(&#39;image/png&#39;);                     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(&#39;,&#39;)[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 : &#39;image/png&#39;});         }                  <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视频教程

上一篇: html的注释是什么
下一篇: input文本框如何实现添加提示文字,填写内容时消失

作者:admin @ 24资源网   2024-09-27

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。