Ecahrt导出PDF

最新推荐文章于 2024-04-10 12:54:18 发布

只看不写

最新推荐文章于 2024-04-10 12:54:18 发布

阅读量224

点赞数

分类专栏： java 文章标签： Itext

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
	<input type="button" id="download" value="下载">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
			animation: false,
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        
        option2 = {
        		animation: false,
        	    title : {
        	        text: '某站点用户访问来源',
        	        subtext: '纯属虚构',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'left',
        	        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        	    },
        	    series : [
        	        {
        	            name: '访问来源',
        	            type: 'pie',
        	            radius : '55%',
        	            center: ['50%', '60%'],
        	            data:[
        	                {value:335, name:'直接访问'},
        	                {value:310, name:'邮件营销'},
        	                {value:234, name:'联盟广告'},
        	                {value:135, name:'视频广告'},
        	                {value:1548, name:'搜索引擎'}
        	            ],
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		// 获取base64图片
		var picBase64Info = myChart.getDataURL();
 
		//创建form提交图片数据
		var postDownLoadFile = function (options) {
			var config = $.extend(true, { method: 'post' }, options);
			var $iframe = $('<iframe id="down-file-iframe" />');
			var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
			$form.attr('action', config.url);
			//图片
			$form.append('<input type="hidden" name="base64Info" value="' + config.data + '" />');
			
			$iframe.append($form);
			$(document.body).append($iframe);
			$form[0].submit();
			$iframe.remove();
		}
		//触发下载功能
		$("#download").on('click',
			function() {
			  var param={};
			  postDownLoadFile({
				url:"${BASE_PATH}/admin/dataanalyze/exportPDF",
				data:picBase64Info,
				method:'post'
			  });
		  });
    </script>
</body>
</html>

导出PDF一定要关闭动画animation: false,

后端:
导入Itext相关jar包
后端框架为jfinal,若为其他适当修改即可

	/**
	 * 
	 * @throws DocumentException 
	 * @throws Exception 
	 * @Description 导出PDF
	 * @category
	 * @author 张银彪  
	 * @date 2019年6月27日 上午9:26:38
	 */
	public void exportPDF() throws DocumentException, Exception {

		Document document = new Document(PageSize.A4, 50, 50, 50, 50); // 创建文档
		// 大小

		try {
			String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径
			
			PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(path + "/" + System.currentTimeMillis()+".pdf")); // 保存路径
			Rectangle rect = new Rectangle(36, 54, 559, 788);
			rect.setBorderColor(BaseColor.BLACK);
			writer.setBoxSize("art", rect);
			HeaderFooter header1 = new HeaderFooter(); // 设置页脚
			writer.setPageEvent(header1);

			Font font = PdfTool.setChineseFont(); // 正文字体

			File fpath = new File(PathKit.getWebRootPath() + Preference.PDF_FONT_PATH);
			BaseFont bfChinese = BaseFont.createFont(fpath.getPath(), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
			Font font2 = new Font(bfChinese, 8, Font.NORMAL); // 数据表字体
			Font fontRed = new Font(bfChinese, 8, Font.NORMAL, new BaseColor(255, 0, 0)); // 数据表示异常字体（红色）

			document.open();// 打开文档

			// 基本信息
				PdfPTable header = new PdfPTable(4);
				header.setSpacingBefore(5);
				header.setSpacingAfter(5);

				PdfPCell baseinfoheader = new PdfPCell(); // 设置抬头
				Paragraph paragraph = new Paragraph("数据图表", font);
				paragraph.setAlignment(1);
				paragraph.setSpacingBefore(25);
				baseinfoheader.setColspan(4);
				baseinfoheader.setBackgroundColor(new BaseColor(185, 185, 185));
				baseinfoheader.setUseAscender(true);
				baseinfoheader.setVerticalAlignment(Element.ALIGN_MIDDLE);
				baseinfoheader.addElement(paragraph);
				header.addCell(baseinfoheader);

				// 插入一行--展示通道名称
				PdfPCell insert_h1 = new PdfPCell(new Phrase("图表", font));
				//header.addCell(insert_h1);
				String imgUrl = getRequest().getParameter("base64Info");
			    String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分
			     	 
		//     byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]);
				String string = imgUrlArr[1];
				byte[] buffer=   Base64.getDecoder().decode(string);
				PdfPCell insert_h2 = new PdfPCell(Image.getInstance(buffer));
				insert_h2.setColspan(4);
				header.addCell(insert_h2);
				PdfPTable mheader = new PdfPTable(4);
				mheader.setSpacingBefore(5);
				mheader.setSpacingAfter(5);

				PdfPTable mytable = new PdfPTable(1); // 插入图片
	
				document.add(header); // 文件头部
				document.add(mytable); // 历史记录列表头部
				document.newPage(); // 前面通道结束后 另起一页显示新通道
		} catch (Exception e) {
			e.printStackTrace();
		}
		document.close();
	}

只看不写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ecahrt导出PDF

前端<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.js"></scri...
复制链接

扫一扫