highcharts 的图片变word 文档 需求分析 最近用highcharts 做数据分析，需要将highcharts 形成的图和表单数据形成word 文档

最终效果：

 

 

 

思路分两步 1 将highcharts 图片转化为svg 存入后台  

                    2 将图片和表单数据变为word 文档

—— 注意：两步分开写方法，否则数据流会导致出错

1 将highcharts 图片转化为svg 存入后台  

前台要引入

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script  src="https://img.hcharts.cn/highcharts/highcharts.js" ></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>//-----------必须引入，才能转为svg
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js" ></script>

后台引入

<!--highcharts  的svg 转化 png-->
        <dependency>
            <groupId>org.apache.xmlgraphics</groupId>
            <artifactId>batik-all</artifactId>
            <version>1.10</version>
        </dependency>
<!--hightcharts导出图片是解决乱码需要用到的一个包 -->
<dependency> 
<groupId>org.lucee</groupId>
 <artifactId>xml-apis-ext</artifactId> 
<version>1.3.04</version>
 </dependency>

 

 

highcharts 容器

<div id="container" style="min-width:400px;height:400px"></div>


var mychart = Highcharts.chart(\'container\', {
    chart: {
        type: \'column\'
    }
//.......
}

2 highcharts 图片转化为svg

function  topic(){
        var chart = $(\'#container\').highcharts();//获取Highcharts对象
        var svg = chart.getSVG();
        var y =svg.indexOf("style");
        var s =svg.indexOf("xmlns=");
        var a =svg.substring(0,y);
        var b =svg.substring(s,svg.length);
        var c = b.indexOf("<text");
        var d = b.indexOf("</text>");
        var e =b.substring(0,c);
        var f =b.substring(d+7,b.length);
        var k =e+f;
        var str = a+k;
        var  str2=str.replace(/</g,\'\n&lt;\').replace(/>/g, \'&gt;\'); 
        alert(str2)
        alert(svg)    
        $("#svg").html(str2);//给form表单textarea赋值
        $("#formEx").submit();//提交form表单

        /*$.ajax({
            url:"/"
            ,type:"post"
            ,data:{
                "chartSVG":chartSVG
               
            }
            ,success:function (path) {

                alert(path)
            }
        })*/
    }

这里注意，处理不好会出现以下异常

org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
前言中不允许有引用。　　

上述中str2

svg

写入表单 为str2  时提交生产图片不会异常，svg 会产生异常

但是当我们用异步 提交， str2 会产生异常，svg 不会产生异常  ---可以测试一下用什么提交才不会发生错误

后台代码：

String downloadFilePath = "D:/1.png" ;
    
        //将svg 转化为png  的部分

        try {

            ConvertToPng.convertToPng(svg, downloadFilePath);//svg转png
        } catch (IOException e) {
            e.printStackTrace();
        } catch (TranscoderException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }

上述代码转换工具类

package com.highcharts.utils;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletResponse;

import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.springframework.transaction.TransactionException;



public class ConvertToPng {

    /**
     * @Description: 将svg字符串转换为png
     * @Author:saiSQ
     * @Since: 2013-11-4下午01:36:54
     * @param svgCode
     *            svg代码
     * @param pngFilePath
     *            保存的路径
     * @throws IOException
     *             io异常
     * @throws TranscoderException
     *             svg代码异常
     */
    public static void convertToPng(String svgCode, String pngFilePath)
            throws IOException, TransactionException, TranscoderException {

        File file = new File(pngFilePath);

        FileOutputStream outputStream = null;
        try {
            file.createNewFile();
            outputStream = new FileOutputStream(file);
            convertToPng(svgCode, outputStream);
        } finally {
            if (outputStream != null) {
                try {
                    outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    
    /**
     * @Description: 将svgCode转换成png文件，直接输出到流中
     * @Author:saiSQ
     * @Since: 2013-11-4下午01:37:56
     * @param svgCode
     *            svg代码
     * @param outputStream
     *            输出流
     * @throws TranscoderException
     *             异常
     * @throws IOException
     *             io异常
     */
    public static void convertToPng(String svgCode, OutputStream outputStream)
            throws  IOException, TranscoderException {
        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();
        } finally {
            if (outputStream != null) {
                try {
                    outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    
   
}

 

版权声明：本文为jsbk原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jsbk/p/9483850.html