使用highcharts 实现本地服务器导出图片

最新推荐文章于 2022-01-18 10:17:05 发布

weixin_34067049

最新推荐文章于 2022-01-18 10:17:05 发布

阅读量864

点赞数

文章标签： java ruby php

原文链接：https://my.oschina.net/badboy2/blog/380135

版权

2019独角兽企业重金招聘Python工程师标准>>>

一。Higcharts 中文网

HighChart中文网，非常好的中文网站，并有精简的demo http://www.hcharts.cn/ 强烈推荐

http://www.hcharts.cn/

二。 highcharts 图片导出功能( 下载图片)：

2.1 从highcharts 远程官网服务器实现图片下载

参考代码： highcharst 中文网

http://www.hcharts.cn/demo/index.php?p=88

2.2 从本地服务器实现图片下载（php 实现与 ruby on rails 实现）

highcharts 生成的chart 格式是svg, 我们要下载的图片是jpg的，实现中间的转换需要插件 batik

下载官网： http://xmlgraphics.apache.org/batik/ 该插件是是基于java的图片格式转换工具

在2.1的下载页面下载svg 格式的图片（可以使用浏览器打开）

1. 命令行转换：

java -jar batik-rasterizer.jar -m image/png test.svg // 吧 test.svg 转化为 test.png格式

2. php 实现的本地下载服务

highcharts 压缩包的 exporting-server/php/php-batik/index.php

<?php
/**
 * This file is part of the exporting module for Highcharts JS.
 * www.highcharts.com/license
 * 
 *  
 * Available POST variables:
 *
 * $filename  string   The desired filename without extension
 * $type      string   The MIME type for export. 
 * $width     int      The pixel width of the exported raster image. The height is calculated.
 * $svg       string   The SVG source code to convert.
 */


// Options
define ('BATIK_PATH', 'batik-rasterizer.jar');

///
ini_set('magic_quotes_gpc', 'off');

$type = $_POST['type'];
$svg = (string) $_POST['svg'];
$filename = (string) $_POST['filename'];

// prepare variables
if (!$filename or !preg_match('/^[A-Za-z0-9\-_ ]+$/', $filename)) {
	$filename = 'chart';
}
if (get_magic_quotes_gpc()) {
	$svg = stripslashes($svg);	
}

// check for malicious attack in SVG
if(strpos($svg,"<!ENTITY") !== false || strpos($svg,"<!DOCTYPE") !== false){
	exit("Execution is topped, the posted SVG could contain code for a malicious attack");
}

$tempName = md5(rand());

// allow no other than predefined types
if ($type == 'image/png') {
	$typeString = '-m image/png';
	$ext = 'png';
	
} elseif ($type == 'image/jpeg') {
	$typeString = '-m image/jpeg';
	$ext = 'jpg';

} elseif ($type == 'application/pdf') {
	$typeString = '-m application/pdf';
	$ext = 'pdf';

} elseif ($type == 'image/svg+xml') {
	$ext = 'svg';

} else { // prevent fallthrough from global variables
	$ext = 'txt';
}

$outfile = "temp/$tempName.$ext";     //输出文件

if (isset($typeString)) {
	
	// size
	$width = '';
	if ($_POST['width']) {
		$width = (int)$_POST['width'];
		if ($width) $width = "-w $width";
	}

	// generate the temporary file
	if (!file_put_contents("temp/$tempName.svg", $svg)) { 
		die("Couldn't create temporary file. Check that the directory permissions for
			the /temp directory are set to 777.");
	}
	
	// do the conversion     执行shell 进行转换 输出到指定文件
	$output = shell_exec("java -jar ". BATIK_PATH ." $typeString -d $outfile $width temp/$tempName.svg");
	
	// catch error
	if (!is_file($outfile) || filesize($outfile) < 10) {
		echo "<pre>$output</pre>";
		echo "Error while converting SVG. ";
		
		if (strpos($output, 'SVGConverter.error.while.rasterizing.file') !== false) {
			echo "
			<h4>Debug steps</h4>
			<ol>
			<li>Copy the SVG:<br/><textarea rows=5>" . htmlentities(str_replace('>', ">\n", $svg)) . "</textarea></li>
			<li>Go to <a href='http://validator.w3.org/#validate_by_input' target='_blank'>validator.w3.org/#validate_by_input</a></li>
			<li>Paste the SVG</li>
			<li>Click More Options and select SVG 1.1 for Use Doctype</li>
			<li>Click the Check button</li>
			</ol>";
		}
	} 
	
	// stream it
	else {       //  下载图片的服务
		header("Content-Disposition: attachment; filename=\"$filename.$ext\"");
		header("Content-Type: $type");
		echo file_get_contents($outfile);
	}
	
	// delete it
	unlink("temp/$tempName.svg");
	unlink($outfile);

// SVG can be streamed directly back
} else if ($ext == 'svg') {
	header("Content-Disposition: attachment; filename=\"$filename.$ext\"");
	header("Content-Type: $type");
	echo $svg;
	
} else {
	echo "Invalid type";
}
?>

3. 使用ruby自己实现的本地下载

前端 haml 页面代码

      %br
      %p{style: 'margin-left:20px'}
      %button#downloadChart  导出统计图片      // 页面按钮
      %button#downloadWord   下载报告模板
%script{:src => "/highcharts.js", :type => "text/javascript"}
%script{:src => "/exporting.js", :type => "text/javascript"}
:javascript
  $(document).ready(function () {
    var chart = new Highcharts.Chart({     // chart 对象
      chart: {
        type: 'column',
        renderTo: 'target'
      },
      title: {
        text: '<b>目标值</b>'
      },
      subtitle: {
        text: ''
      },
      exporting: {
        filename: "target",
        type: "image/png",
        //url:'http://127.0.0.1:4567/'
        width:1000
      },
      xAxis: {
        categories: [
        "#{_processareas.map{|processarea| processarea.upcase}.join '","'}"
        ]
      },
      yAxis: {
        min: 0,
        max: 10,
        tickInterval: 2,
        title: {
          text: '<b>分　　值</b>'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:14px; margin: 0 0 6px 0">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          pointWidth: 20,
          groupPadding: 0.15
        }
      },
      series: [#{
        _marks.map{|group, points|
          "{name: '#{group.upcase}', data: [#{points.join(', ')}]}" 
        }.join(', ')
      }, {
        name: 'PA',
        data: [#{_processarea_marks.join(',')}]
      }]
    });	
	
    $('#downloadChart').click(function(){    // 导出图片button
          var data = chart.getSVG();
          //alert(data);
          //window.open("/img?_data="+data);
          var tmp = document.createElement("Form"); // 图片内容大，使用post, 通过javascript使用post
          tmp.action = "/img";
          tmp.method = "post";
          var pagam = document.createElement("textarea");   // <testarea > </textarea>
          pagam.name = "_data";
          pagam.value = data;
          tmp.appendChild(pagam);
          document.body.appendChild(tmp);
          tmp.submit();                          // 即js 创建表单的过程
    });
    $("#downloadWord").click(function(){    // 导出文档按钮

         //var word = "等级"+"#{_level}"+"模板.doc";
         //alert(window.location.pathname);
         window.location.href ="/doc?level=#{_level}";   //js代开后台服务的连接
		 
    });
  });

服务器： ruby 服务代码

batik 需要java jdk , 所以要把jdk的相关文件拷贝的本地服务器的相关文件夹，也可以通过bat文件中设置path 添加

bat:

set PATH=%PATH%;%CD%\bin

post  '/img' do
  
  data = params[:_data]
  oFile = File.new("target.svg", "r+")
  oFile.syswrite("#{data}")
                        #  使用反斜杠执行shell，exec 执行后，后面的代码不执行， 所以不用
  our = ` java -jar batik-rasterizer.jar -m image/png -d ss.png  target.svg `  // ss.png 是中间文件
      #  our 是shell执行的结果
  iFile = File.new("ss.png", "rb")
  len = File.size?(iFile) 
  content = iFile.sysread(len.to_i)    // ruby 读入图片文件（rb）代码
  
  headers({'Content-Type' => 'image/png',        // header 下载图片
    'Content-Disposition' => "attachment;filename=\"target.png\""})   
  return content     // 写入图片内容
end



#export to doc  _level:
get '/doc' do
 
   #  to-do  
   
  headers({'Content-Type' => 'text/plain',
    'Content-Description' => 'File Transfer',
    'Content-Transfer-Encoding' => 'utf-8',
    'Content-Disposition' => "attachment;filename=\"#{filename}.doc\"",
    'Expires' => '0',
    'Pragma' => 'public'})   //下载文档的 服务
  return content	
end

三。下载文档：

见上面代码

转载于:https://my.oschina.net/badboy2/blog/380135