前端和java后台将HTML转换成pdf

矫情吗；* 2022-04-12 11:41 338阅读 0赞

### 前端和java后台将HTML转换成pdf ###

java后台方式：

public class HtmlToPdf { 
    
        private final static String DEST = "C:\\80afa41a3bfc474cbf1ac8b5bc1d.pdf";	//生成pdf的路径
        private final static String SRC = "D:\\3b33a68bbf52417aac48687937352464.html";	//html文件路径
        public static final String FONT = "/font/NotoSansCJKsc-Regular.otf";	//本地字体路径（百度下载）
    
        public static void main(String[] args) { 
            try { 
                HtmlToPdf html = new HtmlToPdf();
                html.tomPdf(SRC, DEST);
            } catch (Exception e) { 
                e.printStackTrace();
            }
        }
    
        /** * HTML转换成pdf * @param html html文件路径 * @param DEST 生成pdf的路径 * @throws Exception */
        public static void tomPdf(String html, String DEST) throws Exception { 
            ConverterProperties props = new ConverterProperties();
            DefaultFontProvider defaultFontProvider = new DefaultFontProvider(false, false, false);
            defaultFontProvider.addFont(FONT);
            props.setFontProvider(defaultFontProvider);
            PdfWriter writer = new PdfWriter(DEST);
            PdfDocument pdf = new PdfDocument(writer);
            pdf.setDefaultPageSize(new PageSize(595.0F, 842.0F));
            Document document = HtmlConverter.convertToDocument(new FileInputStream(html), pdf, props);
            document.close();
            pdf.close();
    
        }
    
    }

<dependency>
                <groupId>com.itextpdf</groupId>
                <artifactId>html2pdf</artifactId>
                <version>2.0.2</version>
            </dependency>
            <dependency>
                <groupId>com.itextpdf</groupId>
                <artifactId>font-asian</artifactId>
                <version>7.1.2</version>
            </dependency>
            <dependency>
                <groupId>com.itextpdf</groupId>
                <artifactId>barcodes</artifactId>
                <version>7.1.2</version>
            </dependency>

前端方式：（不推荐）  
理由：分辨率并不高，且默认不支持分页

$(function () { 
    	  //唯一需要修改的地方，将需要转换的部分添加id属性export_content
    	  var target = document.getElementById("export_content");
    	  
    	  target.style.background = "#FFFFFF";
    	  html2canvas(target, { 
    		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;
    			//页面偏移
    			var position = 0;
    			//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    			var imgWidth = 595.28;
    			var imgHeight = 592.28/contentWidth * contentHeight;
    
    			var pageData = canvas.toDataURL('image/jpeg', 1.0);
    
    			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");
    		}
    	  })
    	})