Echarts、Highcharts、html2canvas图片导出到excle文件中

echarts导出图片

首先定义一个div
<div  class="col-md-8">
    <div id="main" class="main">
    </div>
</div>
js代码-----------------------
var myChart = ec.init(document.getElementById('main')); 
 var picBase64Info1 = myChart.getDataURL();   //获取base64编码  
$("#canvasImg").val(picBase64Info1);把base64码，放到隐藏域中，传到后台

后台代码---------------------------------------
String canvasImg= super.GetParameterStr("canvasImg");//获得base64码，然后转化一下
         if(canvasImg!="" && !canvasImg.equals("")){         canvasImg=canvasImg.substring("data:image/jpeg;base64,"  
                        .length()-1);
                }
                downExcle(canvasImg);//处理图片方法

public File downExcle(String arrayData) {
        BufferedImage bufferImg = null;
        String name = "temp" + (int) (Math.random() * 100000) + ".xls";
        File f = new File(name);
        List<BufferedImage> images = new ArrayList<>();
        try {
            // 第一步，创建一个webbook，对应一个Excel文件
            HSSFWorkbook wb = new HSSFWorkbook();
            // 第二步，在webbook中添加一个sheet,对应Excel文件中的sheet
            HSSFSheet sheet = wb.createSheet("sheet");
            // 画图的*管理器，一个sheet只能获取一个（一定要注意这点）
            HSSFPatriarch patriarch = sheet.createDrawingPatriarch();
             String savePathImg1 = "temp" + (int) (Math.random() * 100000)+ ".jpg";
            BASE64Decoder decoder = new BASE64Decoder();
            if (!"".equals(arrayData)) {

                byte[] b = decoder.decodeBuffer(arrayData);
                for (int i = 0; i < b.length; ++i) {
                    if (b[i] < 0) {// 调整异常数据
                        b[i] += 256;
                    }
                }
                // 生成图片
                OutputStream out = new FileOutputStream(savePathImg1);
                out.write(b);
                out.flush();
                out.close();
                // 先把读进来的图片放到一个ByteArrayOutputStream中，以便产生ByteArray
                ByteArrayOutputStream byteArrayOut = new ByteArrayOutputStream();
                Image src = Toolkit.getDefaultToolkit().getImage(savePathImg1);
                bufferImg = this.toBufferedImage(src);// Image to BufferedImage
                ImageIO.write(bufferImg, "jpg", byteArrayOut);
                //这个是控制图片大小，在excle的位置。前面四个参数不用修改，主要修改后面的参数
                HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 0, 0,
                        (short) 10, 0, (short) 25, 25);
                anchor.setAnchorType(3);
                // 插入图片
                patriarch.createPicture(anchor, wb.addPicture(
                        byteArrayOut.toByteArray(),
                        HSSFWorkbook.PICTURE_TYPE_JPEG));
            }
            TtabColDefine tb = new TtabColDefine();
            tb.setColName("基准日期");
            // 动态获得行业字段
            //List<String> tabCols = getTabCols("");
            // 设置列头样式
            //setTitleCellStyles(wb, sheet, tabCols);
            // 设置数据样式
            //setDataCellStyles(wb, sheet);
            // 创建一行列头数据
            //creatAppRowHead(sheet, 1, tabCols);
            // 填充行数据
            // creatRows(arrayData, sheet, tabCols);
            FileOutputStream fout = new FileOutputStream(f);
            wb.write(fout);
            fout.close();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return f;
    }

public  BufferedImage toBufferedImage(Image image) {  
    if (image instanceof BufferedImage) {  
        return (BufferedImage) image;  
    }  
    // This code ensures that all the pixels in the image are loaded  
    image = new ImageIcon(image).getImage();  
    BufferedImage bimage = null;  
    GraphicsEnvironment ge = GraphicsEnvironment  
            .getLocalGraphicsEnvironment();  
    try {  
        int transparency = Transparency.OPAQUE;  
        GraphicsDevice gs = ge.getDefaultScreenDevice();  
        GraphicsConfiguration gc = gs.getDefaultConfiguration();  
        bimage = gc.createCompatibleImage(image.getWidth(null),  
                image.getHeight(null), transparency);  
    } catch (HeadlessException e) {  
        // The system does not have a screen  
    }  
    if (bimage == null) {  
        // Create a buffered image using the default color model  
        int type = BufferedImage.TYPE_INT_RGB;  
        bimage = new BufferedImage(image.getWidth(null),  
                image.getHeight(null), type);  
    }  
    // Copy image to buffered image  
    Graphics g = bimage.createGraphics();  
    // Paint the image onto the buffered image  
    g.drawImage(image, 0, 0, null);  
    g.dispose();  
    return bimage;  
}

Highcharts导出图片

highcharts是要获得图片的svg数据
var svg_line = $("#main").highcharts().getSVG();
也是放到隐藏域中，传到后台
后台处理局部方法---------------------------
String svg_line = super.GetParameterStr("svg_line ");
String savePathImg = "temp"+ (int) (Math.random() * 100000) +".png";
                    convertToPng(svg_line , savePathImg);
                    Image src = Toolkit.getDefaultToolkit().getImage(
                            savePathImg);
                BufferedImage bufferImg = this.toBufferedImage(src);
                ByteArrayOutputStream byteArrayOut = new ByteArrayOutputStream();
                ImageIO.write(bufferImg, "png", byteArrayOut);
                //这个是控制图片大小，在excle的位置。前面四个参数不用修改，主要修改后面的参数
                HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 0, 0,
                        (short) 0, 1, (short) 10, 18 );
                anchor.setAnchorType(0);
                // 插入图片
                patriarch.createPicture(anchor, wb.addPicture(
                        byteArrayOut.toByteArray(),
                        HSSFWorkbook.PICTURE_TYPE_PNG));


/** 
     * 将svg字符串转换为png 
     *  
     * @param svgCode 
     *            svg代码 
     * @param pngFilePath 
     *            保存的路径 
     * @throws TranscoderException 
     *             svg代码异常 
     * @throws IOException 
     *             io错误 
     */  
    public static void convertToPng(String svgCode, String pngFilePath) {  

        File file = new File(pngFilePath);  

        FileOutputStream outputStream = null;  
        try {  
            file.createNewFile();  
            outputStream = new FileOutputStream(file);  
            convertToPng(svgCode, outputStream);  
        } catch (Exception e) {  
            e.printStackTrace();  
        } finally {  
            if (outputStream != null) {  
                try {  
                    outputStream.close();  
                } catch (IOException e) {  
                    e.printStackTrace();  
                }  
            }  
        }  
    }  

    /** 
     * 将svgCode转换成png文件，直接输出到流中 
     *  
     * @param svgCode 
     *            svg代码 
     * @param outputStream 
     *            输出流 
     * @throws TranscoderException 
     *             异常 
     * @throws IOException 
     *             io异常 
     */  
    public static void convertToPng(String svgCode, OutputStream outputStream) {  
        try {  
            byte[] bytes = svgCode.getBytes("utf-8");  
            PNGTranscoder t = new PNGTranscoder();  
            TranscoderInput input = new TranscoderInput(  
                    new ByteArrayInputStream(bytes));  
            TranscoderOutput output = new TranscoderOutput(outputStream);  
            t.transcode(input, output);  
            outputStream.flush();  
        } catch (Exception e) {  
            e.printStackTrace();  
        } finally {  
            if (outputStream != null) {  
                try {  
                    outputStream.close();  
                } catch (IOException e) {  
                    e.printStackTrace();  
                }  
            }  
        }  
    }  

html2canvas
引用个html2canvas.js

这里也是生成base64码，放到隐藏域中。处理方法和echarts一样。但是图片清晰度不是很好
var myImage='';
        html2canvas( $("#main") ,{ 
            onrendered: function(canvas){ 
             myImage = canvas.toDataURL();
            //动态生成input框 
            $("#dataval").val(myImage);
            } 
        });