springboot vue hightChart excel导出 个人记录

springboot vue hightChart 进行excel导出 个人记录

需求背景：需要将饼图柱状图等多图 以excel 嵌入图片的格式导出

实现思路：

前台获取svg 传入到后台 svg转为图片格式 写入到excel中导出。 此次遇到一个问题 在本地开发功能完成后 上传到测试环境 导出一直报错，后看报错的发现 记得具体是这个错误java.lang.ClassNotFoundException:com.sun.image.codec.jpeg.JPEGCodec。（不纠结记错没有） 后来发现 在jdk1.8及之后 已经不建议使用了 发生了更改 但是在windows本地我jre里面有这个类 因此在本地开发没有报错 在测试环境就报错了。

处理：

由于我是采用的apache的batik-codec 来进行svg转为图片格式，因此我在查看版本后将版本升级为最新版
因此 单论此类改动可以 换用ImageIO

贴上前端部分代码：

  downReport(){
                let me = this;
                me.onExport = true;
               **this.svgCodes.push(this.$refs['pie'].chart.getSVG())
               this.svgCodes.push(this.$refs['column'].chart.getSVG())
                this.axios.post("/excel/downReport",{svgCodes:this.svgCodes},{responseType: 'arraybuffer'}
                ).then(res=> {
                        let fileName = '*****报表.xls'
                        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, fileName);
                        } else {
                            var link = document.createElement('a');
                            link.href = window.URL.createObjectURL(blob);
                            link.download = fileName;
                            link.click();
                            window.URL.revokeObjectURL(link.href);
                        }
                        me.onExport = false;
                        this.svgCodes=[];
                })**
            },

贴上后端部分代码：

	<!--svg转换图片 -->
		<!-- https://mvnrepository.com/artifact/org.apache.xmlgraphics/batik-codec -->
		<dependency>
			<groupId>org.apache.xmlgraphics</groupId>
			<artifactId>batik-codec</artifactId>
			<version>1.11</version>
		</dependency>

svg转换图片

 /**
     * svg转流
     * @param stream
     * @param svg
     * @param mime
     * @param width
     * @return
     * @throws TranscoderException
     * @throws UnsupportedEncodingException
     */
    public static synchronized ByteArrayOutputStream transcode(ByteArrayOutputStream stream, String svg, Integer mime, Float width) throws TranscoderException, UnsupportedEncodingException {
        //TranscoderInput input = new TranscoderInput(new StringReader(svg));
        TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(svg.getBytes("utf-8")));
        TranscoderOutput transOutput = new TranscoderOutput(stream);

        SVGAbstractTranscoder transcoder = getTranscoder(mime);
        if (width != null) {
            transcoder.addTranscodingHint(SVGAbstractTranscoder.KEY_WIDTH, width);
        }
        transcoder.transcode(input, transOutput);
        return stream;
    }


    public static SVGAbstractTranscoder getTranscoder(Integer mime)  {
        SVGAbstractTranscoder transcoder = null;
        switch (mime) {
            case 0:
                transcoder = new PNGTranscoder();
                break;
            case 1:
                transcoder = new JPEGTranscoder();
                transcoder.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(1.0D));
//                transcoder.addTranscodingHint(ImageTranscoder.KEY_HEIGHT, new Float(800));
                break;
            default:
                break;
        }
        if (transcoder == null) {
        }
        return transcoder;
    }

    public static ByteArrayOutputStream convertToPng(String svgCode,ByteArrayOutputStream outputStream) throws TranscoderException,IOException {
        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 ();
            return outputStream;
        } finally {
            if (outputStream != null) {
                try {
                    outputStream.close ();
                } catch (IOException e) {
                    e.printStackTrace ();
                }
            }
        }
    }

至于excel导出的 就没什么了

<dependency>
			<groupId>org.jeecg</groupId>
			<artifactId>easypoi-base</artifactId>
			<version>2.4.0</version>
		</dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>

附上链接excel导出 https://www.jianshu.com/p/5d67fb720ece