需求： 将页面的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();
    }
}

最终效果：