vue 将echarts的图片导出成pdf文件
温馨提示:
本文最后更新于 2022年11月02日,已超过 772 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
需求: 将页面的echarts 图和页面的列表导出成pdf文件。
思路:echarts可以直接保存为图片,将经过base64编码后直接传给后台即可,table 表格只需要表格中的数据传给后台即可,pdf的导出利用itextpdf 即可。
具体实现
1 导出按钮
<Button type="success" @click="exportPdf()"><Icon type="md-arrow-down" />Report</Button>
2 导出方法
// 生成报表功能
exportPdf(){
if(this.dataCount === 0){
this.$message({
type: "warning",
message: "暂无数据"
});
return;
}
var picBase64Info = this.echartsObj.getDataURL();//获取echarts图的base64编码,为png格式。
var form = new FormData();
var nian= this.formLine.dataTime.getFullYear()
var yue= this.formLine.dataTime.getMonth()+1
var lastDay = new Date(nian,yue,0).getDate()//最后一天
var tableData = JSON.stringify(this.data1).toString()
let fname = 'DNS QPS Monthly Report('+nian+'-'+yue+'-1 ~ '+nian+'-'+yue+'-'+lastDay+').pdf'; //下载文件的名字
form.append("base64Info", picBase64Info);
form.append("tableData", tableData);
let dataTime = nian+"-"+yue
form.append("dataTime", dataTime);
this.$api.exportPdf(form).then((res) => {
if (res != null) {
let blob = new Blob([res], {
type: 'application/pdf' //word文档为msword,pdf文档为pdf
});
if ('download' in document.createElement('a')) { // 非IE下载
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
URL.revokeObjectURL(objectUrl); //释放掉blob对象
}else{//ie浏览器
navigator.msSaveBlob(blob, fname);
}
}
}).catch(error => {
});
},
echartsObj 是自己定义的一个变量,用来保存echarts 对象。
var dnsCharts = echarts.init(document.getElementById('NetworkPerformance'))
...
this.echartsObj = dnsCharts;
具体生成echarts的过程就不写了,echarts 生成后,将值赋给echartsObj 即可。
data1 的数据就是生成table表格所用到的数据。
this.$api.exportPdf(form)只是对fetch做了简单的封装
const exportPdf = params => {
return fetch({
url: '/NetworkPerformance/exportPdf',
method: 'post',
responseType: 'arraybuffer',
data: params
})
}
后端代码
1 引入itext 需要的依赖
<!-- 生成pdf文件 -->
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itextpdf</artifactId>
<version>5.4.2</version>
</dependency>
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
2 controller 层中的代码
@ResponseBody
@Timed
@ApiOperation(value = "DNS月报--查询最大值,最小值平均值", notes = "DNS月报--查询最大值,最小值平均值")
@RequestMapping(value = "/exportPdf", method = RequestMethod.POST)
@ApiImplicitParams({
@ApiImplicitParam(name = "base64Info", value = "获取echarts图的base64编码,为png格式", required = true, paramType = "query", dataType = "String"),
@ApiImplicitParam(name = "tableData",paramType = "body", allowMultiple = true, dataType = "NetworkPerformanceDto"),
@ApiImplicitParam(name = "dataTime", value = "查询时间(年月如2018-11)", required = true, paramType = "query", dataType = "String")
})
public void exportPdf(String base64Info,String tableData,String dataTime,HttpServletRequest request, HttpServletResponse response) {
logger.debug("DNS月报--生成报表");
String savePath;
String pdfFilePath;
try {
JSONArray jsonArray = JSONArray.parseArray(tableData);//并将DS内容取出转为json数组
base64Info = base64Info.split("base64,")[1];//去掉无用信息data:image/png;base64,
File directory = new File("");//参数为空
String filePath = directory.getCanonicalPath()+File.separator+"temp";
String imgName = UUID.randomUUID() + ".png";
savePath = filePath+File.separator+imgName;
//图片保存到 本地
FileUtils.Base64ToImage(base64Info, savePath);
String tmpname=UUID.randomUUID().toString();
pdfFilePath = filePath+File.separator+"pdf"+File.separator+tmpname+".pdf";
File file = DnsReportPdfUtils.createPdf(jsonArray, savePath, dataTime, filePath+File.separator+"pdf", tmpname);
if (file.exists()) {
FileUtils.downloadFile(response,filePath+File.separator+"pdf",tmpname+".pdf");
//下载完成,删除临时pdf文件
FileUtils.delete(pdfFilePath);
}
} catch (Exception e) {
e.printStackTrace();
logger.error(e.getMessage(), e);
}
}
FileUtils 类中的相关函数
/**
*
* @discription 删除文件夹及文件夹下面的文件
* @author lijunjie
* @created 2019年7月3日 下午2:31:02
* @param fileName
* @return
*/
public static boolean delete (String fileName){
try{
File sourceFile = new File(fileName);
if(sourceFile.isDirectory()){
for (File listFile : sourceFile.listFiles()) {
delete(listFile.getAbsolutePath());
}
}
return sourceFile.delete();
}catch(Exception e){
e.printStackTrace();
}
return false;
}
/**
*
* @discription base64位字符串保存为本地图片
* @author lijunjie
* @created 2019年12月20日 上午10:22:41
* @param imgStr 图片的base64 字符串
* @param imgFilePath 图片保存的路径
* @return
*/
public static boolean Base64ToImage(String imgStr,String imgFilePath) {
// 图像数据为空
if (StringUtils.isEmpty(imgStr)){
return false;
}
try {
Decoder decoder = Base64.getDecoder();
byte[] b = decoder.decode(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
*
* @discription 下载指定目录下的文件,返回二进制流数据
* @author lijunjie
* @created 2019年12月26日 下午3:59:12
* @param response
* @param filePath 文件所在目录
* @param fileName 文件名称
* @return
*/
public static String downloadFile(HttpServletResponse response, String filePath,String fileName) {
File path = null;
response.setHeader("content-type", "application/octet-stream");
// response.setContentType("application/octet-stream");
try {
response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName, "UTF-8"));
} catch (UnsupportedEncodingException e2) {
e2.printStackTrace();
}
byte[] buff = new byte[1024];
BufferedInputStream bis = null;
OutputStream os = null;
try {
path = new File(filePath+"/"+fileName);
os = response.getOutputStream();
bis = new BufferedInputStream(new FileInputStream(path));
int i = bis.read(buff);
while (i != -1) {
os.write(buff, 0, buff.length);
os.flush();
i = bis.read(buff);
}
} catch (FileNotFoundException e1) {
//e1.getMessage()+"系统找不到指定的文件";
return "系统找不到指定的文件";
}catch (IOException e) {
e.printStackTrace();
} finally {
if (bis != null) {
try {
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "success";
}
DnsReportPdfUtils 生成pdf 的核心代码
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Element;
import com.itextpdf.text.Font;
import com.itextpdf.text.Image;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.Paragraph;
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 DnsReportPdfUtils {
private static final Font FontChinese12 = getChineseFont(12);
private static final Font FontChinese8 = getChineseFont(8);
private static final Font FontChinese6 = getChineseFont(6);
public static File createPdf(JSONArray jsonArray,String imgPath,String dataTime,String rootPath,String tmpname) {
//生成pdf
// 1、建立com.itextpdf.text.Document对象的实例。
Document document = new Document(PageSize.A4);
File dir=new File(rootPath);
if(!dir.exists()){
dir.mkdirs();
}
File pdffile = new File(rootPath + File.separator + tmpname + ".pdf");
FileOutputStream fos;
try {
fos = new FileOutputStream(pdffile);
//2、建立一个书写器(Writer)与document对象关联,通过书写器(Writer)可以将文档写入到输出流中。
PdfWriter writer = PdfWriter.getInstance(document, fos);
// 添加页码
PdfReportM1HeaderFooter footer = new PdfReportM1HeaderFooter();
writer.setPageEvent(footer);
//3、打开文档。
document.open();
String lastDay = DateUtil.getLastDayOfMonth(Integer.parseInt(dataTime.substring(0,4)),Integer.parseInt(dataTime.substring(5)));
//Paragraph header = new Paragraph("DNS QPS Monthly Report("+dataTime+"-1 ~ "+dataTime+"-"+lastDay+")", getChineseFont(16));
Paragraph header = new Paragraph("DNS QPS Monthly Report("+dataTime+")", getChineseFont(18));
header.setAlignment(Element.ALIGN_CENTER);
//空行
Paragraph blankRow = new Paragraph(40f, " ", getChineseFont(15));
PdfPTable tableAvaiImg = new PdfPTable(1);
tableAvaiImg.setHorizontalAlignment(Element.ALIGN_CENTER);
tableAvaiImg.setSpacingBefore(10f);
tableAvaiImg.addCell(createImageCell(imgPath));
//设置table的标题
Font tableTitle = getChineseFont(14);
//tableTitle.setColor(17,150,238);
tableTitle.setStyle(Font.BOLD);
Paragraph title = new Paragraph(dataTime+" DNS qps(query per second)",tableTitle );
title.setAlignment(Element.ALIGN_CENTER);
title.setSpacingBefore(40f);
//dns 最大值最小值平均值的表格
PdfPTable dnsTable = new PdfPTable(10);
//表格宽度
int dnsTableWidthInfo[] = {20,20,20,20,20,20,20,20,20,20};
// 设置表格上面空白宽度
dnsTable.setSpacingBefore(10f);
dnsTable.setWidths(dnsTableWidthInfo);
//设置表头
PdfPCell cell0;
//name
cell0 = new PdfPCell(new Phrase("Name", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setFixedHeight(40f);//设置固定高度
cell0.setRowspan(2);
dnsTable.addCell(cell0);
//QPS
cell0 = new PdfPCell(new Phrase("QPS", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setFixedHeight(20f);//设置固定高度
cell0.setColspan(3);
dnsTable.addCell(cell0);
//CPU avg(%)
cell0 = new PdfPCell(new Phrase("CPU avg(%)", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//MEM avg(%)
cell0 = new PdfPCell(new Phrase("MEM avg(%)", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//Package In
cell0 = new PdfPCell(new Phrase("Package In", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//Package Out
cell0 = new PdfPCell(new Phrase("Package Out", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//Flow In(Mbits)
cell0 = new PdfPCell(new Phrase("Flow In(Mbits)", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//Flow Out(Mbits)
cell0 = new PdfPCell(new Phrase("Flow Out(Mbits)", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setRowspan(2);
cell0.setFixedHeight(40f);//设置固定高度
dnsTable.addCell(cell0);
//Max
cell0 = new PdfPCell(new Phrase("Max", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setFixedHeight(20f);//设置固定高度
dnsTable.addCell(cell0);
//Min
cell0 = new PdfPCell(new Phrase("Min", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setFixedHeight(20f);//设置固定高度
dnsTable.addCell(cell0);
//Average
cell0 = new PdfPCell(new Phrase("Average", FontChinese8));
cell0.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell0.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell0.setFixedHeight(20f);//设置固定高度
dnsTable.addCell(cell0);
//想table中添加数据
for(int i=0;i< jsonArray.size();i++) {
JSONObject json= (JSONObject) jsonArray.get(i);
dnsTable.addCell(getCell(json.getString("deviceName")));
dnsTable.addCell(getCell(json.getString("max")));
dnsTable.addCell(getCell(json.getString("min")));
dnsTable.addCell(getCell(json.getString("avg")));
dnsTable.addCell(getCell(json.getString("cpuAvg")));
dnsTable.addCell(getCell(json.getString("menAvg")));
dnsTable.addCell(getCell(json.getString("pkgIn")));
dnsTable.addCell(getCell(json.getString("pkgOut")));
dnsTable.addCell(getCell(json.getString("flowIn")));
dnsTable.addCell(getCell(json.getString("flowOut")));
}
//4、向文档中添加内容。
document.add(header);
document.add(blankRow);//空行
document.add(tableAvaiImg);
// document.add(blankRow);//空行
document.add(title);//添加标题
document.add(dnsTable);
//5、关闭文档
document.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return pdffile;
}
private static PdfPCell createImageCell(String path) throws DocumentException, IOException {
Image img = Image.getInstance(path);
PdfPCell cell = new PdfPCell(img, true);
cell.setBorder(PdfPCell.NO_BORDER);
return cell;
}
/**
* 字体
* @param size
* @return
*/
private static Font getChineseFont(float size) {
Font FontChinese = null;
try {
BaseFont bfChinese = BaseFont.createFont();
FontChinese = new Font(bfChinese, size, Font.NORMAL);
} catch (DocumentException de) {
System.err.println(de.getMessage());
} catch (IOException ioe) {
System.err.println(ioe.getMessage());
}
return FontChinese;
}
private static PdfPCell getCell(String cellValue) {
PdfPCell cell = new PdfPCell();
try {
cell = new PdfPCell(new Phrase(cellValue, FontChinese6));
cell.setHorizontalAlignment(Element.ALIGN_CENTER); //设置水平居中
cell.setVerticalAlignment(Element.ALIGN_MIDDLE); // 设置垂直居中
cell.setFixedHeight(20f);
} catch (Exception e) {
e.printStackTrace();
}
return cell;
}
}
PdfReportM1HeaderFooter 页面基本设置类
import java.io.IOException;
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Element;
import com.itextpdf.text.Font;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.Phrase;
import com.itextpdf.text.Rectangle;
import com.itextpdf.text.pdf.BaseFont;
import com.itextpdf.text.pdf.ColumnText;
import com.itextpdf.text.pdf.PdfContentByte;
import com.itextpdf.text.pdf.PdfPageEventHelper;
import com.itextpdf.text.pdf.PdfTemplate;
import com.itextpdf.text.pdf.PdfWriter;
public class PdfReportM1HeaderFooter extends PdfPageEventHelper {
/**
* 页眉
*/
public String header = "";
/**
* 文档字体大小,页脚页眉最好和文本大小一致
*/
public int presentFontSize = 12;
/**
* 文档页面大小,最好前面传入,否则默认为A4纸张
*/
public Rectangle pageSize = PageSize.A4;
// 模板
public PdfTemplate total;
// 基础字体对象
public BaseFont bf = null;
// 利用基础字体生成的字体对象,一般用于生成中文文字
public Font fontDetail = null;
/**
*
* Creates a new instance of PdfReportM1HeaderFooter 无参构造方法.
*
*/
public PdfReportM1HeaderFooter() {
}
/**
*
* Creates a new instance of PdfReportM1HeaderFooter 构造方法.
*
* @param yeMei
* 页眉字符串
* @param presentFontSize
* 数据体字体大小
* @param pageSize
* 页面文档大小,A4,A5,A6横转翻转等Rectangle对象
*/
public PdfReportM1HeaderFooter(String yeMei, int presentFontSize, Rectangle pageSize) {
this.header = yeMei;
this.presentFontSize = presentFontSize;
this.pageSize = pageSize;
}
public void setHeader(String header) {
this.header = header;
}
public void setPresentFontSize(int presentFontSize) {
this.presentFontSize = presentFontSize;
}
/**
*
* TODO 文档打开时创建模板
*
* @see com.itextpdf.text.pdf.PdfPageEventHelper#onOpenDocument(com.itextpdf.text.pdf.PdfWriter, com.itextpdf.text.Document)
*/
public void onOpenDocument(PdfWriter writer, Document document) {
total = writer.getDirectContent().createTemplate(50, 50);// 共 页 的矩形的长宽高
}
/**
*
* TODO 关闭每页的时候,写入页眉,写入'第几页共'这几个字。
*
* @see com.itextpdf.text.pdf.PdfPageEventHelper#onEndPage(com.itextpdf.text.pdf.PdfWriter, com.itextpdf.text.Document)
*/
public void onEndPage(PdfWriter writer, Document document) {
try {
if (bf == null) {
bf = BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", false);
}
if (fontDetail == null) {
fontDetail = new Font(bf, presentFontSize, Font.NORMAL);// 数据体字体
}
} catch (DocumentException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
// 1.写入页眉
ColumnText.showTextAligned(writer.getDirectContent(), Element.ALIGN_LEFT, new Phrase(header, fontDetail), document.left(), document.top() + 20, 0);
// 2.写入前半部分的 第 X页/共
int pageS = writer.getPageNumber();
String foot1 = "第 " + pageS + " 页 /共";
Phrase footer = new Phrase(foot1, fontDetail);
// 3.计算前半部分的foot1的长度,后面好定位最后一部分的'Y页'这俩字的x轴坐标,字体长度也要计算进去 = len
float len = bf.getWidthPoint(foot1, presentFontSize);
// 4.拿到当前的PdfContentByte
PdfContentByte cb = writer.getDirectContent();
// 5.写入页脚1,x轴就是(右margin+左margin + right() -left()- len)/2.0F 再给偏移20F适合人类视觉感受,否则肉眼看上去就太偏左了 ,y轴就是底边界-20,否则就贴边重叠到数据体里了就不是页脚了;注意Y轴是从下往上累加的,最上方的Top值是大于Bottom好几百开外的。
ColumnText.showTextAligned(cb, Element.ALIGN_CENTER, footer, (document.rightMargin() + document.right() + document.leftMargin() - document.left() - len) / 2.0F + 20F, document.bottom() - 20, 0);
// 6.写入页脚2的模板(就是页脚的Y页这俩字)添加到文档中,计算模板的和Y轴,X=(右边界-左边界 - 前半部分的len值)/2.0F + len , y 轴和之前的保持一致,底边界-20
cb.addTemplate(total, (document.rightMargin() + document.right() + document.leftMargin() - document.left()) / 2.0F + 20F, document.bottom() - 20); // 调节模版显示的位置
}
/**
*
* TODO 关闭文档时,替换模板,完成整个页眉页脚组件
*
* @see com.itextpdf.text.pdf.PdfPageEventHelper#onCloseDocument(com.itextpdf.text.pdf.PdfWriter, com.itextpdf.text.Document)
*/
public void onCloseDocument(PdfWriter writer, Document document) {
// 7.最后一步了,就是关闭文档的时候,将模板替换成实际的 Y 值,至此,page x of y 制作完毕,完美兼容各种文档size。
total.beginText();
total.setFontAndSize(bf, presentFontSize);// 生成的模版的字体、颜色
String foot2 = " " + (writer.getPageNumber() - 1) + " 页";
total.showText(foot2);// 模版显示的内容
total.endText();
total.closePath();
}
}
最终效果:
正文到此结束
- 本文标签: 其他
- 本文链接: http://www.365codemall.com/article/23
- 版权声明: 本文由李俊杰原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权