echarts java导出 echarts导出pdf

转载

陌陌香阁 2024-01-19 17:02:33

文章标签 echarts java导出 Echarts导出为pdf echarts导出图表（包含背景）背景图 Image 文章分类 Java 后端开发

Echarts好像是只支持png和jpg的导出，不支持pdf导出。我就想着只能够将png在后台转为pdf了。

首先介绍一下jsp界面的代码。

var thisChart = echarts.init(document.getElementById('myChart'));
$('#activeResourcesExportBtn').on('click',function(){  
    var chartExportUrl = 'isms/activeResource/export.do';
    var picBase64Info = thisChart.getDataURL();//获取echarts图的base64编码，为png格式。                                                      
    $('#chartForm').find('input[name="base64Info"]').val(picBase64Info);//将编码赋值给输入框
    $('#chartForm').attr('action',chartExportUrl).attr('method', 'post');//设置提交到的url地址                                                 
    $('#chartForm').attr('action',chartExportUrl).attr('method', 'post');//设置提交方式为post
    $('#chartForm').submit();
});<form id="chartForm" style="display:none">
    <input id="imageValue" name="base64Info" type="text" maxlength="50000"/>
</form>

上面的前端代码主要的作用是获取echarts图的base64编码，然后把值赋给一个input输入框，通过form表单提交到后台。下面是后台的代码。

@RequestMapping(value="export", method=RequestMethod.POST)
@ResponseBody
    public void chartExport(HttpServletResponse response,String base64Info) throws IOException {
        String newFileName;
        newFileName = "统计图" + System.currentTimeMillis() + ".pdf";
        String newPngName = newFileName.replaceFirst(".pdf", ".png");
        String exportFilePath = "d:/export"
        base64Info = base64Info.replaceAll(" ", "+");
        BASE64Decoder decoder = new BASE64Decoder();
        String[] arr = base64Info.split("base64,");
        byte[] buffer;
        try {  
            buffer = decoder.decodeBuffer(arr[1]);  
        } catch (IOException e) {  
            throw new RuntimeException();  
        }
        OutputStream output = null;
        try {
            output = new FileOutputStream(new File(exportFilePath+newPngName));//生成png文件
            output.write(buffer);
            output.flush();
            output.close();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        Pdf(exportFilePath+newPngName,exportFilePath+newFileName);
        File f = new File(exportFilePath+newPngName);
        if(f.exists()){
            f.delete();
        }
        response.setContentType("application/octet-stream");
        InputStream input = null;
        OutputStream outputString = null;
        try {
            response.setHeader("Content-Disposition","attachment; filename=" + URLEncoder.encode("统计图" + ".pdf", "UTF-8"));设置浏览器弹出下载框，前端用form表单提交，我用ajax没有效果。            input = new BufferedInputStream(new FileInputStream(new File(exportFilePath + newFileName)));
            outputString = new BufferedOutputStream(response.getOutputStream());
            copy(input, outputString);
            outputString.flush();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }catch (IOException e) {
            e.printStackTrace();
        }finally{
            input.close();
            outputString.close();
        }    }
    //通过png文件来生成pdf文件
    public File Pdf(String imagePath, String mOutputPdfFileName) {
        Document doc = new Document(PageSize.A4, 20, 20, 20, 20);
        try {
            PdfWriter writer = PdfWriter.getInstance(doc, new FileOutputStream(mOutputPdfFileName));
            doc.open();
            doc.newPage();
            Image png1 = Image.getInstance(imagePath);
            float heigth = png1.getHeight();
            float width = png1.getWidth();
            int percent = this.getPercent2(heigth, width);
            png1.setAlignment(Image.MIDDLE);
            png1.setAlignment(Image.TEXTWRAP);
            png1.scalePercent(percent + 3);
            doc.add(png1);
            doc.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (DocumentException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }        File mOutputPdfFile = new File(mOutputPdfFileName);
        if (!mOutputPdfFile.exists()) {
            mOutputPdfFile.deleteOnExit();
            return null;
        }
        return mOutputPdfFile;
    }     private int getPercent2(float h, float w) {
            int p = 0;
            float p2 = 0.0f;
            p2 = 530 / w * 100;
            p = Math.round(p2);
            return p;
        }
//输入流读取到输出流
private void copy(BufferedInputStreaminput,BufferedOutputStream outputString){
        byte [] but = new byte[1024];
        try {
            while(input.read()!=-1){
                int by = input.read(but);
                outputString.write(but, 0, by);
                outputString.flush();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

上面的代码是controller层的代码，也是后台主要的处理逻辑。在使用代码之前应该倒入itext包，应为是用itex来生成pdf文件。大部分的代码都是io流的东西，就不详细介绍了。希望能对大家有所帮助。

echarts导出图表（包含背景）

需求：后端返回背景图，在图上显示动画效果绘制图表，之后用户可以在移动端长按保存结果图。
流程：首先利用echarts生成图表，设置动画时长为2s，之后利用echarts的getDataURL方法生成base64格式图片替换到img标签上，覆盖echarts图表。
主要问题：下载echarts时遇到图片跨域问题
解决办法：服务端设置图片头Access-Control-Allow-Origin:*，js设置img.crossOrigin = ‘anonymous’

index.html页面分两层
第一层是img，用于展示背景图And最后的结果图
第二层是div，用来展示echarts的图表

<img v-show="showImgLabel" style="z-index: 2;" id="result_img" v-cloak  :src="result_img_url">
<div v-show="showChartLabel" style="z-index: 1;" id="result_charts" v-cloak></div>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JS代码
vue_this.result_img_url = resultImg //背景图url
var option = {} //echarts配置项
vue_this.showImgLabel = false
vue_this.showChartLabel = true
var resultImgDiv = document.getElementById('result_img_div')
var width = resultImgDiv.offsetWidth
//根据背景图大小设置div大小
document.getElementById('result_charts').style.width = width + 'px'
var img = new Image()
var base64 = ''
img.crossOrigin = 'anonymous'
img.src = resultImg
img.onload = function() {
  //将背景图转为base64
  base64 = vue_this.image2Base64(img)
  //设置高度
  var height = img.height * (resultImgDiv.offsetWidth / img.width)
  document.getElementById('result_charts').style.height = height + 'px'
  document.getElementById('result_img').style.height = height + 'px'
  //设置echarts背景图
  option.graphic = [{
    type: 'image',
    id: 'one',
    z: -10,
    bounding: 'raw',
    zlevel: 0,
    style: {
      image: base64,
      width: width,
      height: height
    }
  }]
  var myChart = echarts.init(document.getElementById('result_charts'))
  myChart.setOption(option)
  setTimeout(function() {
    var resultBase64 = myChart.getDataURL({
      type: 'png',
      pixelRatio: 2,  //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
      backgroundColor: '#fff'
    })
    vue_this.result_img_url = resultBase64
    //利用绝对定位和z-index使charts至于底层，实现覆盖效果
    //如果用v-show或者v-if实现替换效果，页面会出现瞬间的抖动
    document.getElementById('result_charts').style.position = 'absolute'  
    vue_this.showImgLabel = true
  }, 2000)
}
--------------------------------------------------------------------------------------------------------------------

图片转base64方法

image2Base64: function(img) {
  var canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  var ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)
  var dataURL = canvas.toDataURL('image/png')
  return dataURL
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。