精华内容
下载资源
问答
  • 2020-08-16 12:38:45

    网上介绍了很多将html转成PDF的方法,我主要尝试了以下四种(按使用先后排序):

    • html2pdf
    • mpdf
    • dompdf
    • tcpdf

    具体的使用方法和过程就不赘述了,网上有很多相关资料。这四个开源库,都可以通过composer安装,可能遇到的坑是网络传输慢,安装超时。如果总是超时,建议使用码云上的源进行下载安装。

    下面说一下结论,这四个库都可以将html转成PDF,但在转换效果上,mpdf是最好的,没有之一。不管是html格式上还是中文编码、中文字体上,mpdf都是最好的,但美中不足的是,mpdf貌似不支持复杂表格的自动分页,在使用的过程中,花了大半天的时间查资料,结果无功而返。不得已,人工拆解html中的内容,生成多个html模版,最后生成多个单页的PDF文件。因为最终使用的是打印版,所以这样分页也没有问题。

    mpdf使用示例:

    /**
    * @param $htmlContent    html文件内容
    * @return string    返回生成的PDF文件内容
    */
    function genBillPdfContent($htmlContent) {
            $mpdf = new \Mpdf\Mpdf();
            $mpdf->SetDisplayMode('fullpage');
            $mpdf->autoScriptToLang = true;
            $mpdf->autoLangToFont = true;
            $mpdf->WriteHTML($htmlContent);
    
            return $mpdf->Output('filename.pdf', \Mpdf\Output\Destination::STRING_RETURN);
    }

     

    更多相关内容
  • 通过itext 把html转成pdf文档,只需要把html传给itext,就会直接转成pdf,亲自试用了一下很方便,前提html的格式一定要严格,
  • 1.用户导入word生成pdf -首先导入word的时候读取word里面的全部内容。调用(ReadAndWriteDoc)然后将内容 传送到createPdf里面生成pdf。导入的时候读取采用poi /生成的时候采用的是itext ...4.将html转换成pdf(itext)
  • html转成pdf所需jar包

    2016-01-18 13:18:58
    资源包含html转成pdf所必须的jar包,同时还有tidy将html转成xml
  • C# HTML转成PDF 文件

    热门讨论 2013-01-12 13:44:19
    C# HTML转成PDF 文件 客户端,打开点击按钮,然后等待,然后去bin目录中去找寻生成的pdf即可
  • Java 将HTML转成PDF的方法

    千次阅读 2022-03-23 16:18:03
    需用的Jar包 ...PDFReport.java package test; import java.io.File; import java.io.FileOutputStream; import com.itextpdf.text.Document; import com.itextpdf.text.Element; import com.itextpdf

    需用的Jar包

    https://download.csdn.net/download/GXSeveryday/12380111 
    

    点我下载

    PDFReport.java

    package test;   
    import java.io.File;      
    import java.io.FileOutputStream;    
    
    import com.itextpdf.text.Document;
    import com.itextpdf.text.Element;
    import com.itextpdf.text.Font;
    import com.itextpdf.text.PageSize;
    import com.itextpdf.text.Phrase;
    import com.itextpdf.text.pdf.BaseFont;
    import com.itextpdf.text.pdf.PdfPCell;
    import com.itextpdf.text.pdf.PdfPTable;
    import com.itextpdf.text.pdf.PdfWriter;    
        
       
    public class PDFReport {
        private static Font headfont ;// 设置字体大小    
        private static Font keyfont;// 设置字体大小    
        private static Font textfont;// 设置字体大小    
        static{    
            BaseFont bfChinese;    
            try {    
                //bfChinese = BaseFont.createFont("STSong-Light","UniGB-UCS2-H",BaseFont.NOT_EMBEDDED);    
                bfChinese = BaseFont.createFont("STSong-Light","UniGB-UCS2-H",BaseFont.NOT_EMBEDDED);    
                headfont = new Font(bfChinese, 20, Font.BOLD);// 设置字体大小    
                keyfont = new Font(bfChinese, 12, Font.BOLD);// 设置字体大小    
                textfont = new Font(bfChinese, 12, Font.NORMAL);// 设置字体大小    
            } catch (Exception e) {             
                e.printStackTrace();    
            }     
        }    
            
            
        public Document PDFReport(Document document,File file) {            
             document.setPageSize(PageSize.A4);// 设置页面大小    
             try {    
                PdfWriter.getInstance(document,new FileOutputStream(file));    
                document.open();     
            } catch (Exception e) {    
                e.printStackTrace();    
            }     
            return document; 
                
        }    
        int maxWidth = 520;    
            
            
         public PdfPCell createCell(String value,Font font,int align){    
             PdfPCell cell = new PdfPCell();    
             cell.setVerticalAlignment(Element.ALIGN_MIDDLE);            
             cell.setHorizontalAlignment(align);        
             cell.setPhrase(new Phrase(value,font));    
            return cell;    
        }    
            
         public PdfPCell createCell(String value,Font font){    
             PdfPCell cell = new PdfPCell();    
             cell.setVerticalAlignment(Element.ALIGN_MIDDLE);    
             cell.setHorizontalAlignment(Element.ALIGN_CENTER);     
             cell.setPhrase(new Phrase(value,font));    
            return cell;    
        }    
        
         public PdfPCell createCell(String value,Font font,int align,int colspan){    
             PdfPCell cell = new PdfPCell();    
             cell.setVerticalAlignment(Element.ALIGN_MIDDLE);    
             cell.setHorizontalAlignment(align);        
             cell.setColspan(colspan);    
             cell.setPhrase(new Phrase(value,font));    
            return cell;    
        }    
        public PdfPCell createCell(String value,Font font,int align,int colspan,boolean boderFlag){    
             PdfPCell cell = new PdfPCell();    
             cell.setVerticalAlignment(Element.ALIGN_MIDDLE);    
             cell.setHorizontalAlignment(align);        
             cell.setColspan(colspan);    
             cell.setPhrase(new Phrase(value,font));    
             cell.setPadding(3.0f);    
             if(!boderFlag){    
                 cell.setBorder(0);    
                 cell.setPaddingTop(15.0f);    
                 cell.setPaddingBottom(8.0f);    
             }    
            return cell;    
        }    
         public PdfPTable createTable(int colNumber){    
            PdfPTable table = new PdfPTable(colNumber);    
            try{    
                table.setTotalWidth(maxWidth);    
                table.setLockedWidth(true);    
                table.setHorizontalAlignment(Element.ALIGN_CENTER);         
                table.getDefaultCell().setBorder(1);   
                //table.getDefaultCell().setMinimumHeight(120);//设置最小行高
            }catch(Exception e){    
                e.printStackTrace();    
            }    
            return table;    
        }    
         public PdfPTable createTable(float[] widths){    
                PdfPTable table = new PdfPTable(widths);    
                try{    
                    table.setTotalWidth(maxWidth);    
                    table.setLockedWidth(true);    
                    table.setHorizontalAlignment(Element.ALIGN_CENTER);         
                    table.getDefaultCell().setBorder(1);    
                }catch(Exception e){    
                    e.printStackTrace();    
                }    
                return table;    
            }    
            
         public PdfPTable createBlankTable(){    
             PdfPTable table = new PdfPTable(1);    
             table.getDefaultCell().setBorder(0);    
             table.addCell(createCell("", keyfont));             
             table.setSpacingAfter(20.0f);    
             table.setSpacingBefore(20.0f);    
             return table;    
         }    
             
         public void generatePDF(File file) throws Exception{   
        	Document document = new Document();// 建立一个Document对象
        	document = PDFReport(document,file);
            PdfPTable table = createTable(4);    
            table.addCell(createCell("学生信息列表:", keyfont,Element.ALIGN_CENTER,4,false));    
                    
            table.addCell(createCell("姓名", keyfont, Element.ALIGN_CENTER));    
            table.addCell(createCell("年龄", keyfont, Element.ALIGN_CENTER));    
            table.addCell(createCell("性别", keyfont, Element.ALIGN_CENTER));    
            table.addCell(createCell("住址", keyfont, Element.ALIGN_CENTER));    
                
            for(int i=0;i<5;i++){    
                table.addCell(createCell("姓"+i, keyfont,Element.ALIGN_LEFT,4,true));    
                /*table.addCell(createCell(i+15+"", textfont));    
                table.addCell(createCell((i%2==0)?"男":"女", textfont));    
                table.addCell(createCell("地址"+i, textfont)); */   
            }    
            document.add(table);    
                
            document.close();    
         }    
         public void  generateOfflinePDF(File file) throws Exception{
    
         	Document document = new Document();// 建立一个Document对象
         	document = PDFReport(document,file);
             PdfPTable table = createTable(4);   
             //抬头
             table.addCell(createCell("项目缴款通知书", headfont,Element.ALIGN_CENTER,4,false));    
             //第一行        
             table.addCell(createCell("缴款人姓名:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("测试专用操作", textfont, Element.ALIGN_LEFT));    
             table.addCell(createCell("缴款人证件号码:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("510522", textfont, Element.ALIGN_LEFT));      
             //第2行   
             table.addCell(createCell("凭证时间:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("2016-02-03", textfont, Element.ALIGN_LEFT));    
             table.addCell(createCell("凭证编号:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("112233", textfont, Element.ALIGN_LEFT));  
             
             //第3行     
             table.addCell(createCell("项目名称:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("大周皇朝项目", textfont, Element.ALIGN_LEFT,3,true));  
             //第4行     
             table.addCell(createCell("标的名称:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("标的", textfont, Element.ALIGN_LEFT,3,true));  
             //第5行      
             table.addCell(createCell("应缴金额:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("15元", textfont, Element.ALIGN_LEFT,3,true));  
             //第6行      
             table.addCell(createCell("户名:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("王超", textfont, Element.ALIGN_LEFT,3,true)); 
             //第7行    
             table.addCell(createCell("开户行:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("中国银行", textfont, Element.ALIGN_LEFT,3,true));
             //第8行      
             table.addCell(createCell("账号:", keyfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("622", textfont, Element.ALIGN_LEFT,3,true));
             //第9行  
             table.addCell(createCell("特别提醒:", keyfont, Element.ALIGN_LEFT,4,false));  
             //第10行   
             String tj = "  您的报名信息已与以下账户信息绑定,请选择其中之一进行缴款,不能使用现金缴款。请选择以下注册账户之一进行缴款,若"
             		+ "使用以下账户之外的其他账户进行缴款,或选择两个以上注册账户进行组合缴款的,缴款人将无法取得竞买资格,"
             		+ "说缴款项将作为误进款于项目交易结束后三个工作日内原路径退回。";
             table.addCell(createCell(tj, textfont, Element.ALIGN_LEFT,4,false));  
             //第11行      
             String jzsj = "缴款截止日期:"+"2016-02-01";
             table.addCell(createCell(jzsj, keyfont, Element.ALIGN_LEFT,4,false));  
             //第12行      
             table.addCell(createCell("序号", textfont, Element.ALIGN_CENTER));  
             table.addCell(createCell("银行", textfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("账号", textfont, Element.ALIGN_CENTER,2,true));
             //第13行      
             table.addCell(createCell("1", textfont, Element.ALIGN_CENTER));  
             table.addCell(createCell("中国银行", textfont, Element.ALIGN_CENTER));    
             table.addCell(createCell("510522", textfont, Element.ALIGN_CENTER,2,true));
             //第14行      
             table.addCell(createCell("收款账户确认:", keyfont, Element.ALIGN_LEFT,4,false)); 
             //第15行
             String tx = "  项目经理已告知中国建设银行、中国工商银行、重庆农村商业银行可选择为收款银行。本人选择"+"中国银行"+",特此确定。";
             table.addCell(createCell(tx, textfont, Element.ALIGN_LEFT,4,false)); 
             //第16行      
             table.addCell(createCell("缴款人经办人签字:", keyfont, Element.ALIGN_LEFT,4,false)); 
             
             document.add(table);    
             document.close(); 
         }
         public static void main(String[] args) throws Exception {    
             File file = new File("D:\\text.pdf");    
             file.createNewFile();    
            new PDFReport().generateOfflinePDF(file);          
        }    
    }
    
    
    展开全文
  • go 语言实现 html pdf

    2021-05-26 15:53:08
    go 语言实现 html pdf
  • Dompdf - 将HTML转成PDF的PHP5库
  • 主要介绍了Java实现Html转Pdf的方法,实例分析了java基于ITextRenderer类操作页面及系统自带字体生成pdf文件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • .Net HTML页面转PDF格式

    2019-03-20 10:39:26
    通过url 或者本地文件夹 将每个HTML 页面转换相应PDF格式 小工具 bin下直接打开。 C# 源码,VS直接运行。
  • phantomjs html转pdf 完美版本 可以把 html 非常完美的转pdf,与浏览器转换出来的一样完美
  • html转pdf css控制

    2018-03-09 21:01:30
    html转pdf中css样式解析,解决解析样式出现异常问题,便于html转换为pdf
  • vue实现把html转成PDF文件

    千次阅读 2021-01-06 10:11:50
    vue实现把html转成PDF文件安装直接上代码使用 安装 jspdf npm install jspdf --save html2canvas npm install html2canvas --save 直接上代码 // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import ...

    vue实现把html转成PDF文件

    安装

    jspdf npm install jspdf --save
    html2canvas npm install html2canvas --save

    直接上代码

    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    // 将导出方法挂载到全局
    export default {
      install(Vue, options) {
        Vue.prototype.getPdfByWeb = function(title) {
        // #pdfDom是要保存的页面元素
          return html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true,
            taintTest: false,
            useCORS: true,
            async: true,
            scale: '2',
            dpi: '192'
          }).then(function(canvas) {
            const contentWidth = canvas.width
            const contentHeight = canvas.height
            // 一页pdf显示html页面生成的canvas高度;
            const pageHeight = Math.ceil(contentWidth / 595.28 * 841.89)
            // 未生成pdf的html页面高度
            let leftHeight = contentHeight
            // pdf页面偏移
            let position = 0
            // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            const imgWidth = 595.28
            const imgHeight = 595.28 / contentWidth * contentHeight
            // console.log(canvas)
            const pageData = canvas.toDataURL('image/jpeg/png', 1)
            const PDF = new JsPDF('', 'pt', 'a4', true)
            // console.log(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(title + '.pdf') 保存PDF
            return PDF.output('datauristring')
          })
        }
      }
    }
    

    使用

    this.getPdfByWeb('标题').then((res) => {
              // 要执行的一些方法
            })
    
    展开全文
  • Java HTML转成PDF

    万次阅读 热门讨论 2019-01-29 18:11:23
    注意:先说明一下我的思路:先将HTML转成string类型(因为HTML里面部分数据是动态,因此,我需要替换,因此转string类型,最笨的办法),然后将string格式的HTML转成PDF; 有几个坑需要注意一下: (1):字体...

    注意:先说明一下我的思路:先将HTML转成string类型(因为HTML里面部分数据是动态,因此,我需要替换,因此转成string类型,最笨的办法),然后将string格式的HTML转成PDF;

    有几个坑需要注意一下:

    (1):字体设置成 SimSun 否则有可能中文不展示(在<style>body {font-size: 12px; font-family:SimSun;}</stylr>里面加)

    (2):背景图片:本地没有设置成功,突发奇想:上传到服务器(也是抱着一种试的态度,结果成功了。。)

    (3):背景颜色不能这样去写:background: linear-gradient(to bottom, #295aa0 0%, #1e4c8b 100%);
    这样写不知道为啥就是没有显示出来,试了一下这样去写background: blue; 就好使;(在<style></stylr>里面加)

    (4):css和js尽量写在HTML里面,别引用;因为我引用有问题,显示不出来;

    (5):还有一个大坑,这样出来右边展示多一半,少部分展示不出来。说是加上  @page {size: A4;margin:0;}(在<style></stylr>里面加)。但是我试了还是不好使。
    最后沟通在div上设置宽度  @media all{#divDiv{width:690px;}}(在<style></stylr>里面加),a4是820px,这里为啥写的是690px,因为有边距;

    1.先导入pom依赖包

    
    <!--pdf-->
    <dependency>
    	<groupId>org.xhtmlrenderer</groupId>
    	<artifactId>core-renderer</artifactId>
    	<version>R8</version>
    </dependency>
    <dependency>
    	<groupId>commons-codec</groupId>
    	<artifactId>commons-codec</artifactId>
    </dependency>
    
    <dependency>
        <groupId>com.itextpdf</groupId>
        <artifactId>itextpdf</artifactId>
        <version>5.5.1</version>
    </dependency>
    <dependency>
        <groupId>com.itextpdf.tool</groupId>
        <artifactId>xmlworker</artifactId>
        <version>5.5.9</version>
    </dependency>

     2.将HTML转成string

            StringBuilder strline = new StringBuilder("");
        	File fin = new File("C:\\Users\\Administrator\\Desktop\\共享数据质量报告(1)\\共享数据质量报告\\index.html");
    		try (RandomAccessFile accessFile = new RandomAccessFile(fin, "r");
    			FileChannel fcin = accessFile.getChannel();
    		){
    			Charset charset = Charset.forName("UTF-8");
    			int bufSize = 100000; 
    		    ByteBuffer rBuffer = ByteBuffer.allocate(bufSize); 
    			String enterStr = "\n";
    			byte[] bs = new byte[bufSize];
    			
    			StringBuilder strBuf = new StringBuilder("");
    			while (fcin.read(rBuffer) != -1) {
    				int rSize = rBuffer.position();
    				rBuffer.rewind();
    				rBuffer.get(bs);
    				rBuffer.clear();
    				String tempString = new String(bs, 0, rSize,charset);
    				tempString = tempString.replaceAll("\r", "");
     
    				int fromIndex = 0;
    				int endIndex = 0;
    				while ((endIndex = tempString.indexOf(enterStr, fromIndex)) != -1) {
    					String line = tempString.substring(fromIndex, endIndex);
    					line = strBuf.toString() + line;
    					strline.append(line.trim());
    					
    					strBuf.delete(0, strBuf.length());
    					fromIndex = endIndex + 1;
    				}
    				if (rSize > tempString.length()) {
    					strline.append(tempString.substring(fromIndex, tempString.length()));
    					strBuf.append(tempString.substring(fromIndex, tempString.length()));
    				} else {
    					strline.append(tempString.substring(fromIndex, rSize));
    					strBuf.append(tempString.substring(fromIndex, rSize));
    				}
    			}
    			System.out.println(strline.toString().replaceAll("\"", "'"));
    		} catch (Exception e) {
    			
    		}

    3.将string类型的HTML格式转成PDF

            String htmlString="";
            htmlString = strline.toString().replaceAll("\"", "'").replaceAll("<style>", "<style>body{font-family:SimSun;font-size:14px;}");    //注意这里为啥要写这个,主要是替换成这样的字体,如果不设置中文有可能显示不出来。
        
    		OutputStream os = new FileOutputStream("C:\\Users\\Administrator\\Desktop\\in.pdf");    //生成PDF文件的路径
            ITextRenderer renderer = new ITextRenderer();
    		ITextFontResolver font = renderer.getFontResolver();
            font.addFont("C:/WINDOWS/Fonts/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);//添加中文识别,这里是设置的宋体,Linux下要换成对应的字体
            renderer.setDocumentFromString(htmlString.toString());
            
    		renderer.layout();
    		renderer.createPDF(os);
    		renderer.finishPDF();

    4.HTML页面

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link href="css/jquery-ui-1.8.16.custom.css" type="text/css" rel="stylesheet" />
    		<link href="css/ui.jqgrid.css" type="text/css" rel="stylesheet" />
    		<link href="css/global.css" type="text/css" rel="stylesheet" />
    		<script src="js/jquery-1.9.1.min.js"></script>
    		<script src="js/jquery.jqGrid.src.js"></script>
    		<script src="js/grid.locale-cn.js"></script>
    		<script src="js/jquery-ui.min.js"></script>
    		<script src="js/echarts.min.js"></script>
    		<script src="js/macarons.js"></script>
    		<script src="js/urls.js"></script>
    		<style type="text/css">
    			@charset "utf-8";
    
    body {
    	line-height: 1.42857143;
    	color: #333;
    	font-size: .875rem;
    	font-size: 12px;
    	font-family: SimSun;    /*字体写成这样,否则乱码,有可能中文不显示*/
    	overflow-x: hidden;
    	/*background: #165b9d;*/
    }
    
    fieldset,
    img {
    	border: none;
    }
    
    html,
    body {
    	margin: 0;
    	padding: 0;
    }
    
    html {
    	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	-webkit-text-size-adjust: 100%;
    	-ms-text-size-adjust: 100%;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
    	display: block
    }
    
    audio,
    canvas,
    progress,
    video {
    	display: inline-block;
    	vertical-align: baseline
    }
    
    audio:not([controls]) {
    	display: none;
    	height: 0
    }
    
    [hidden],
    template {
    	display: none
    }
    
    a {
    	background-color: transparent
    }
    
    a:active,
    a:hover {
    	outline: 0
    }
    
    abbr[title] {
    	border-bottom: 1px dotted
    }
    
    b,
    strong {
    	font-weight: 700
    }
    
    dfn {
    	font-style: italic
    }
    
    h1 {
    	margin: .67em 0;
    	font-size: 2em
    }
    
    s mark {
    	color: #000;
    	background: #ff0
    }
    
    small {
    	font-size: 80%
    }
    
    sub,
    sup {
    	position: relative;
    	font-size: 75%;
    	line-height: 0;
    	vertical-align: baseline
    }
    
    sup {
    	top: -.5em
    }
    
    sub {
    	bottom: -.25em
    }
    
    img {
    	border: 0
    }
    
    svg:not(:root) {
    	overflow: hidden
    }
    
    figure {
    	margin: 1em 40px
    }
    
    hr {
    	height: 0;
    	-webkit-box-sizing: content-box;
    	-moz-box-sizing: content-box;
    	box-sizing: content-box
    }
    
    pre {
    	overflow: auto
    }
    
    code,
    kbd,
    pre,
    samp {
    	font-family: monospace, monospace;
    	font-size: 1em
    }
    
    button,
    input,
    optgroup,
    select,
    textarea {
    	margin: 0;
    	font: inherit;
    	color: inherit
    }
    
    button {
    	overflow: visible
    }
    
    button,
    select {
    	text-transform: none
    }
    
    button,
    html input[type=button],
    input[type=reset],
    input[type=submit] {
    	-webkit-appearance: button;
    	cursor: pointer
    }
    
    button[disabled],
    html input[disabled] {
    	cursor: default
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
    	padding: 0;
    	border: 0
    }
    
    input {
    	line-height: normal;
    	outline: none;
    }
    
    input[type=checkbox],
    input[type=radio] {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	padding: 0
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    	height: auto
    }
    
    input[type=search] {
    	-webkit-box-sizing: content-box;
    	-moz-box-sizing: content-box;
    	box-sizing: content-box;
    	-webkit-appearance: textfield
    }
    
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration {
    	-webkit-appearance: none
    }
    
    fieldset {
    	padding: .35em .625em .75em;
    	margin: 0 2px;
    	border: 1px solid silver
    }
    
    legend {
    	padding: 0;
    	border: 0
    }
    
    textarea {
    	overflow: auto
    }
    
    optgroup {
    	font-weight: 700
    }
    
    a {
    	color: #333;
    	text-decoration: none;
    }
    
    input[disabled] {
    	cursor: not-allowed!important;
    	background: rgba(10, 10, 10, .1)!important;
    }
    
    ul,
    li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    /*css reset*/
    
    
    body, html{
    	height: 100%;
    }
    
    .col-12 {
    	width: 100%;
    }
    
    .col-11 {
    	width: 91.66666667%;
    }
    
    .col-10 {
    	width: 83.33333333%;
    }
    
    .col-9 {
    	width: 75%;
    }
    
    .col-8 {
    	width: 66.66666667%;
    }
    
    .col-7 {
    	width: 58.33333333%;
    }
    
    .col-6 {
    	width: 49%;
    }
    
    .col-5 {
    	width: 41.66666667%;
    }
    
    .col-4 {
    	width: 33.33333333%;
    }
    
    .col-3 {
    	width: 25%;
    }
    
    .col-2 {
    	width: 16.66666667%;
    }
    
    .col-1 {
    	width: 8.33333333%;
    }
    
    .col-12,
    .col-11,
    .col-10,
    .col-9,
    .col-8,
    .col-7,
    .col-6,
    .col-5,
    .col-4,
    .col-3,
    .col-2,
    .col-1 {
    	float: left;
    	box-sizing: border-box;
    }
    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    .row {
      margin-right: -15px;
      margin-left: -15px;
    }
    
    .container:before,
    .container:after,
    .row:before,
    .row:after{
      display: table;
      content: " ";
    }
    
    .container:after,
    .row:after{
    	clear: both;
    }
     
    .fl{
      float: left; 	
    }
     
    .fr{
      float: right; 	
    }
    
    .text-left{
    	text-align: left;
    }
    .text-right{
    	text-align: right;
    }
    .text-center{
    	text-align: center;
    }
    
    #main{
    	width: 1100px;
    	/*position: absolute;*/
    	margin: 0px auto;
    }
    .con{
    	position: relative;
    }
    .title{
    	background: url(http://192.168.1.40:8067/img/background/t_bg.png);/*背景图片*/    
    	height: 90px;
    	width: 100%;
    	background-size: 100% 100%;
    	margin: 0px;
    }
    
    .sub_title{
    	margin: 0px;
    	text-align: center;
    	font-size: 18px;
    	color: #eca142;
    	margin-bottom: 10px;
    	padding: 0px 20px;
    }
    .t_con{
    	color: #fff;
    	font-size: 18px;
        top: 29px;
        left: 96px;
        position: relative;
    
    }
    .con_text{
    	color: #1f4e79;
    	font-size: 18px;
    	padding: 0px 20px;
    	text-indent:40px;
    	margin: 0px;
    	margin-top: 5px;
    }
    
    .tj{
    	width: 999px;
    	padding: 0px 50px;
    	margin-top: 10px;
    }
    .tj ul{
    	list-style: none;
    }
    
    .tj ul li{
    	width: 330px;
    	text-align: left;
    	/*padding:0px 10;*/
    	float: left;
    	position: relative;
    	height: 100px;
    	background: blue;
    	margin: 5px 0px;
    }
    
    
    
    .tj_t{
    	font-size: 18px;
    	padding-left: 10px;
    	color: #fff;
    }
    .tj_num{
    	color: #30c9fa;
    	font-size: 18px;
    	margin-left: 10px;
    }
    .tj_com{
    	margin: 15px 10px;
    }
    /*.border{
    	border-right: 1px solid #fff;
    }*/
    
    .hr{
    	width: 1px;
        height: 80px;
        background-color: #fff;
        opacity: 0.3;
        display: inline-block;
        right: 40px;
        top: -84px;
        position: relative;
        float: right;
    }
    
    .blue-box+.blue-box {
    	margin-left: 10px;
    }
    .blue-box {
        border-radius: 3px;
        background: #fff;
        border: 1px solid #7e9bc4;
    }
    
    .blue-box .blue-box-head {
        font-size: 18px;
        color: #fff;
        padding: 10px;
        line-height: 24px;
        overflow: hidden;
        clear: both;
        background: linear-gradient(to bottom, #295aa0 0%, #1e4c8b 100%);
    }
    
    .ring60 {
        height: 165px;
    }
    
    .padlr10 {
        padding: 0 10px;
    }
    
    
    .bar {
    	height: 330px;
    }
    
    
    .bd {
        margin: 10px;
        padding: 10px;
        background: #365d98;
        border-radius: 2px;
        margin-bottom: 0;
    }
    .flex-row {
        flex-direction: row;
    }
    .flex {
        display: flex;
    }
    
    .bd > div {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-size: 18px;
        border-right: 1px solid #4873b3;
        padding-left: 10px;
        padding-right: 10px;
        color: #fff;
    }
    
    .bd > div:last-child {
        border: none;
    }
    
    .bd > div span:last-child {
        color: orange;
    }
    
    .allPane, .otherPane {
        overflow-y: auto;
    }
    .clearfix {
    }
    .clearfix {
        clear: both;
        overflow: hidden;
    }
    
    .pad10 {
        padding: 10px;
    }
    
    .box-white {
        /* border: 1px solid #535353; */
        /* background: linear-gradient(to bottom, #4d4d4d 0%, #090909 100%); */
        /* padding: 10px; */
        color: #fff;
    }
    .box-white {
        color: #fff;
        border: 1px solid #7e9bc4;
    }
    .box-white {
        /* padding: 10px; */
        color: #fff;
    }
    
    .spans {
        display: inline-block;
    }
    .spans {
        background: #ebeef3;
        margin-left: 1px;
    }
    
    .spans span.on {
        color: orange;
        background: #365d98;
        font-weight: bold;
    }
    .spans span {
        display: inline-block;
        background: #ebeef3;
        padding: 10px;
        border: 1px solid #7e9bc4;
        cursor: pointer;
        margin-top: -1px;
        color: #333;
        margin-left: -1px;
    }
    
    .box-white-body {
        /* background: #222122; */
        /* padding: 10px; */
        position: relative;
    }
    .table-wrap {
        width: 100%;
        /* overflow-x: auto; */
    }
    .nopad {
        padding: 0!important;
    }
    .box-white-body {
        background: #fff;
        padding: 10px;
    }
    .clearfix {
        clear: both;
        overflow: hidden;
    }
    
    
    .table-wrap .ui-widget-content {
    	background: none;
    }
    
    .table-wrap .ui-state-default,
    .table-wrap .ui-widget-content .ui-state-default,
    .table-wrap .ui-widget-header .ui-state-default {
    	background: none;
    }
    
    .table-wrap .ui-widget-content {
    	/*background: linear-gradient(to bottom, #1e1f23 0%, #2a2b2d 5%, #222 100%);*/
    	color: #77dbff;
    	border: 1px solid #ebeef3;
    }
    
    .table-wrap .ui-state-default,
    .table-wrap .ui-widget-content .ui-state-default,
    .table-wrap .ui-widget-header .ui-state-default,
    .table-wrap .ui-button,
    .table-wrap .ui-button.ui-state-disabled:hover,
    .table-wrap .ui-button.ui-state-disabled:active {
    	color: #77dbff;
    	border: none!important;
    }
    
    .table-wrap .ui-widget-content {
    	color: #333;
    }
    
    .ui-jqgrid .ui-jqgrid-htable th {
    	height: auto;
    	padding: 10px 0px!important;
    	background: #365d98!important;
    	color: #fff!important;
    }
    
    .ui-jqgrid-view tr:hover td {
    	background: #008dd2!important;
    }
    
    .ui-corner-all,
    .ui-corner-top,
    .ui-corner-left,
    .ui-corner-tl {
    	border-radius: 0;
    }
    
    .ui-corner-all,
    .ui-corner-top,
    .ui-corner-right,
    .ui-corner-tr {
    	border-radius: 0;
    }
    
    .ui-corner-all,
    .ui-corner-bottom,
    .ui-corner-left,
    .ui-corner-bl {
    	border-radius: 0;
    }
    
    .ui-corner-all,
    .ui-corner-bottom,
    .ui-corner-right,
    .ui-corner-br {
    	border-radius: 0;
    }
    
    .table-wrap .jqlist td {
    	color: #333!important;
    }
    
    .table-wrap .jqlist tr:nth-child(even) td {
    	background: #ebeef3;
    }
    
    .table-wrap .jqlist tr:nth-child(odd) td {
    	background: #fff;
    }
    
    .jqlist td a {
    	color: #ff8b00!important;
    	cursor: pointer;
    	text-decoration: underline;
    }
    
    .ui-pager-control {
    	padding-top: 5px!important;
    	padding-bottom: 5px!important;
    }
    
    .ui-pg-input {
    	color: #333;
    }
    
    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height: auto;
        padding: 8px 0;
        text-align: center;
    }
    
    #line {
    	height: 330px;
    }
    
    
    /*滚动条*/
    
    ::-webkit-scrollbar {
    	width: 8px;
    	height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
    	border-radius: 5px;
    	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    	background: rgba(0, 0, 0, .5);
    }
    
    ::-webkit-scrollbar-thumb {
    	background: rgba(0, 0, 0, .3);
    }
    
    ::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    	border-radius: 2px;
    }
    
    
    /*滚动条 end*/
    
    		</style>
    	</head>
    
    	<body class="flex flex-column">
    		<!-- <header class="head clearfix">
    		
    		</header> -->
    		<main id="main" class="main">
    			<div class="con">
    				<h4 class="title">
    					<span class="t_con">总结</span>
    				</h4>
    				<p class="con_text">
    					数据总体运转正常,今日共收到23家共享单位提供数据,共上传20Mb数据,整体数据项完成度为76%,同比提高了14%,航班覆盖率为94%,同比提高了16%。
    				</p>
    			</div>
    			<div class="con">
    				<h4 class="title">
    					<span class="t_con">今日数据共享问题</span>
    				</h4>
    				<p class="con_text">
    					中国南方航空公司今日发现有数据断传情况,东方航空公司和长龙航空公司今日没有上传数据。
    				</p>
    				<p class="con_text">
        				中国南方航空公司数据质量较昨日有所下降。数据覆盖率下降了12%。
    				</p>
    			</div>
    			<div class="tj">
    				<ul>
    					<li class="border">
    						<div class="tj_com">
    							<span class="tj_t">开放数据单位数(个)</span><span class="tj_num">22</span>
    						</div>
    						<div class="tj_com">
    							<span class="tj_t">平均计划航班架次(架次)</span><span class="tj_num">0</span>
    						</div>
    						<div class="hr"></div>
    					</li>
    					<li>
    						<div class="tj_com">
    							<span class="tj_t">开放运行数量</span><span class="tj_num">6070207</span>
    						</div>
    						<div class="tj_com">
    							<span class="tj_t">平均开放航班架次(架次)</span><span class="tj_num">0</span>
    						</div>
    						<div class="hr"></div>
    					</li>
    					<li>
    						<div class="tj_com">
    							<span class="tj_t">开放数据项(项)</span><span class="tj_num">157</span>
    						</div>
    						<div class="tj_com">
    							<span class="tj_t">平均计划每天航班覆盖率(%)</span><span class="tj_num">0.0%</span>
    						</div>
    					</li>
    					<li>
    						<div class="tj_com">
    							<span class="tj_t">开放航班架次(架次)</span><span class="tj_num">17365</span>
    						</div>
    						<div class="tj_com">
    							<span class="tj_t">平均每天数据量(条)</span><span class="tj_num">13</span>
    						</div>
    						<div class="hr"></div>
    					</li>
    					<li>
    						<div class="tj_com">
    							<span class="tj_t">计划航班架次(架次)</span><span class="tj_num">39386</span>
    						</div>
    						<div class="tj_com">
    							<span class="tj_t">平均每天存储量(M)</span><span class="tj_num">0</span>
    						</div>
    					</li>
    				</ul>
    			</div>
    
    			<div class="col-12 " style="padding-left: 50px;margin-top: 20px;margin-bottom: 10px;">
    				<div class="blue-box col-6">
    					<div class="blue-box-head">
    						数据项开放情况统计
    					</div>
    					<div class="blue-box-body">
    						<div class="bar" id="bar3"></div>
    					</div>
    				</div>
    				<div class="blue-box col-6">
    					<div class="blue-box-head">
    						运行单位开放度完成情况排名
    					</div>
    					<div class="blue-box-body">
    						<div class="col-6">
    							<div class="ring60" id="ring1_1"></div>
    						</div>
    						<div class="col-6">
    							<div class="ring60" id="ring1_2"></div>
    						</div>
    						<div class="col-6">
    							<div class="ring60" id="ring1_3"></div>
    						</div>
    						<div class="col-6">
    							<div class="ring60" id="ring1_4"></div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</main>
    		
    		<!-- <script src="js/page/index.js"></script> -->
    		<script type="text/javascript">
    			var ouoUrl = urls.home_operationUnitOpenness; //运行单位开放度完成情况排名---饼图
    var dioBarUrl = urls.home_dataItemOpening_bar; //数据项开放情况统计--柱形图
    var placeHolderStyle = {
    	normal: {
    		label: {
    			show: false
    		},
    		labelLine: {
    			show: false
    		},
    		color: "rgba(0,0,0,0)",
    		borderWidth: 0
    	},
    	emphasis: {
    		color: "rgba(0,0,0,0)",
    		borderWidth: 0
    	}
    };
    var dataStyle = {
    	normal: {
    		formatter: '{c}%',
    		position: 'center',
    		show: true,
    		textStyle: {
    			fontSize: '20',
    			fontWeight: 'normal',
    			color: '#df9f58'
    		}
    	}
    };
    
    var ringLinearOption = {
    	title: [{
    		text: '',
    		left: '48%',
    		top: '55%',
    		textAlign: 'center',
    		textStyle: {
    			fontWeight: 'normal',
    			fontSize: '14',
    			color: '#333',
    			textAlign: 'center',
    		},
    	}],
    	series: [{
    			type: 'pie',
    			hoverAnimation: false,
    			radius: ['70%', '82%'],
    			center: ['50%', '50%'],
    			labelLine: {
    				normal: {
    					show: false
    				}
    			},
    			label: {
    				normal: {
    					position: 'center'
    				}
    			},
    			data: [{
    				value: 0,
    				itemStyle: {
    					normal: {
    						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    							offset: 0,
    							color: '#f4b243'
    						}, {
    							offset: 1,
    							color: '#f0763c'
    						}]),
    					}
    				},
    				label: dataStyle,
    			}, {
    				value: 0,
    				itemStyle: placeHolderStyle,
    			}]
    		},
    		{
    			type: 'pie',
    			hoverAnimation: false,
    			radius: ['75%', '77%'],
    			center: ['50%', '50%'],
    			labelLine: {
    				normal: {
    					show: false
    				}
    			},
    			label: {
    				normal: {
    					position: 'center'
    				}
    			},
    			data: [{
    					value: 0,
    					itemStyle: placeHolderStyle
    				},
    				{
    					value: 0,
    					itemStyle: {
    						normal: {
    							color: '#fff4db'
    						}
    					}
    				}
    
    			]
    		}
    	]
    };
    var barOption = {
    	tooltip: {
    		trigger: 'axis',
    		axisPointer: {
    			type: 'shadow'
    		},
    		formatter: ' {a}<br/>{b}: {c}'
    	},
    	grid: {
    		top: '2%',
    		left: '8%',
    		right: '8%',
    		bottom: '3%',
    		containLabel: true
    	},
    	xAxis: [{
    		type: 'value',
    		axisLine: {
    			show: false
    		},
    		splitLine: {
    			show: false
    		},
    		axisTick: {
    			show: false
    		},
    		axisLabel: {
    			show: false
    		}
    	}],
    	yAxis: [{
    			type: 'category',
    			inverse: true,
    			data: [],
    			axisTick: {
    				show: false,
    				alignWithLabel: true
    			},
    			axisLine: {
    				show: false
    			},
    			axisLabel: {
    				color: '#333',
    				fontSize: 14
    			}
    		},
    		{
    			type: 'category',
    			inverse: true,
    			axisLine: {
    				show: false
    			},
    			axisTick: {
    				show: false
    			},
    			axisLabel: {
    				color: '#ef5214',
    				fontSize: 14
    			},
    			data: []
    		}
    	],
    	series: [{
    		name: '',
    		type: 'bar',
    		barWidth: '30%',
    		itemStyle: {
    			normal: {
    				barBorderRadius: 20,
    				color: {
    					colorStops: [{
    						offset: 0,
    						color: '#3dc0e9' // 0% 处的颜色
    					}, {
    						offset: 1,
    						color: '#45e3cf' // 100% 处的颜色
    					}],
    					globalCoord: false, // 缺省为 false
    				}
    			},
    		},
    		label: {
    			normal: {
    				show: false
    			}
    		},
    		data: []
    	}]
    };
    
    $(function() {
    	
    	ring1_1 = echarts.init(document.getElementById('ring1_1'), e_macarons);
    	ring1_1.setOption(ringLinearOption);
    	ring1_2 = echarts.init(document.getElementById('ring1_2'), e_macarons);
    	ring1_2.setOption(ringLinearOption);
    	ring1_3 = echarts.init(document.getElementById('ring1_3'), e_macarons);
    	ring1_3.setOption(ringLinearOption);
    	ring1_4 = echarts.init(document.getElementById('ring1_4'), e_macarons);
    	ring1_4.setOption(ringLinearOption);
    	renderLinearRing(ouoUrl, {});
    
    	bar1 = echarts.init(document.getElementById('bar3'));
    	bar1.setOption(barOption);
    	renderBar(dioBarUrl, {}, bar1);
    });
    
    
    //初始化自定义表格
    function renderLinearRing(url, cs) {
    	$.getJSON(url, cs, function(data) {
    		data.forEach(function(item, i) {
    			var a = [];
    			var b = [];
    			var c = eval('ring1_' + (i + 1));
    			c.setOption({
    				title: [{
    					text: item.name
    				}],
    				series: [{
    					data: [{
    						value: item.value,
    						itemStyle: {
    							normal: {
    								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    									offset: 0,
    									color: '#f4b243'
    								}, {
    									offset: 1,
    									color: '#f0763c'
    								}]),
    							}
    						},
    						label: dataStyle,
    					}, {
    						value: 100 - item.value,
    						itemStyle: placeHolderStyle,
    					}]
    				}, {
    					data: [{
    							value: item.value,
    							itemStyle: placeHolderStyle
    						},
    						{
    							value: 100 - item.value,
    							itemStyle: {
    								normal: {
    									color: '#fff4db'
    								}
    							}
    						}
    
    					]
    				}]
    
    			})
    		});
    	});
    }
    
    
    //饼图
    function renderBar(url, cs, dom, f) {
    	$.getJSON(url, cs, function(data) {
    		dom.setOption({
    			tooltip: {
    				formatter:function(p){
    					console.log(p);
    					if(f){
    						return p[0].name + ':' +p[0].value +'%';
    					}
    					else{
    						return p[0].name + ':' +p[0].value;
    					}
    				}
    			},
    			yAxis: [{
    				data: data.category
    			}, {
    				data: data.ydata ? data.ydata : data.data
    			}],
    			series: [{
    				name: cs.choose,
    				data: data.data
    			}]
    		});
    	})
    
    }
    		</script>
    	</body>
    </html>

    4.效果图

     

     

     

     

     

    展开全文
  • 1.用户导入word生成pdf -首先导入word的时候读取word里面的全部内容。调用(ReadAndWriteDoc)然后将内容 传送到createPdf里面生成pdf。导入的时候读取采用poi /生成的时候采用的是...4.将html转换成pdf(itext)
  • Go-Golang实现HTML转PDF

    2019-08-14 03:44:51
    Golang实现HTML转PDF
  • 在上一篇文章中,我们学习了使用对pdf进行盖章/签章/数字签名,到此为止,常用的pdf操作已经全部实现,但是实际开发中很多人比较喜欢将html转pdf,本文介绍将html转pdf的方法 首先,贴上代码 import java.io....
  • 使用场景:先在webView中展示html内容然后在进行,webview转换成pdf 文件,并保存到相应的路径下;
  • 1.使用java代码调用压缩包内wkhtmltopdf.exe。 2.写入对应url及其其他参数 3.调用代码即可生成,亲测有效好用 4.内附示例代码
  • 其他的样式都已经实现了,使用的itext,但layui和echarts的样式就是不出来。
  • 使用wkhtmltopdf工具使html转成pdf

    千次阅读 2018-05-08 09:36:34
    public JsonResult HtmlToPdf(string url) { bool success = true; string dname = url.Split('?')[1].Split('|')[0].Split('=')[1]; string dindex = url.Split...
  • 已经用Jsoup处理过html文件,所以htnl文件格式绝对是规范的,在windows和MacOX系统上转换都正常,但是在linux上运行转换提示出错: RuntimeWorkerException: Invalid nested tag p found, expected closing tag span...
  • 基于qt,用c++编写的程序,可以运行,主要功能是可以把html文件转换成pdf文件格式,点击pro,用qtcreator 打开运行即可
  • html转pdf工具

    2018-08-03 12:02:49
    html转pdf工具,可通过参数调用 实现 html页面 转换pdf文件
  • 前端实现html转成pdf并下载

    万次阅读 2019-02-15 14:03:35
    html转成pdf,下载(html2canvas 和 jsPDF) 最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用...
  • android_HTML转PDF

    2019-01-05 14:31:41
    安卓下可用的HTML转PDF代码,支持中文和单独的图片 android_HTML转PDF android_HTML转PDF
  • html2canvas jspdf 将html转成 pdf

    千次阅读 2019-03-05 11:37:42
    项目搭建安装插件html2canvas和jspdf在项目中引入遇到的问题多行省略号 安装插件html2canvas和jspdf npm install html2canvas--save npm install jspdf --save html2canvas可以通过获取HTML的某个元素,然后...
  • java实现html转pdf,包含后端代码,html测试页面,pom依赖,jar包,如页面过于复杂需调整页面,有些样式itextpdf不支持,请寻找其它样式替换。
  • html页面带有js,生成的pdf应是加载完全的html页面效果,有没有实现方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,778
精华内容 46,311
关键字:

html转成pdf

友情链接: Q with Fuzzy.rar