Web开发 – 第2页

5月 12, 2023

js实现ECharts图表的下载

作者 5xue 在 Javascript

方法一：
ECharts自带的方法，在toolbox配置项，feature里面有一个saveAsImage方法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			toolbox: {
				show: true,
				feature: {saveAsImage: {}}
			},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – js实现ECharts图表的下载</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

tooltip: {},

legend: {

data:['销量']

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

toolbox: {

show: true,

feature: {saveAsImage: {}}

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option, true);

</script>

</body>

</html>

查看样例

方法二：
Echarts提供一个接口getDataURL，通过它可以导出图表图片，返回一个 base64 的 URL。实现思路：

通过getDataURL()获取图片的base64编码字符；
字符解码，并转换成Blob对象；
通过Blob对象创建URL对象；
利用触发下载操作；

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<input type="button" value="下载图表" onclick="saveImage()" />
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);

		function base64ToBlob(code) {
			let parts = code.split(';base64,');
			let contentType = parts[0].split(':')[1];
			let raw = window.atob(parts[1]);
			let rawLength = raw.length;
			let uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			return new Blob([uInt8Array], { type: contentType });
		}
		
		function saveImage() {
			let content = myChart.getDataURL();
			let aLink = document.createElement('a');
			let blob = this.base64ToBlob(content);
			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", true, true);
			aLink.download = "ECharts报表.png";
			aLink.href = URL.createObjectURL(blob);
			aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window}));
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – js实现ECharts图表的下载</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option, true);

function base64ToBlob(code) {

let parts = code.split(';base64,');

let contentType = parts[0].split(':')[1];

let raw = window.atob(parts[1]);

let rawLength = raw.length;

let uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

}

function saveImage() {

let content = myChart.getDataURL();

let aLink = document.createElement('a');

let blob = this.base64ToBlob(content);

let evt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true);

aLink.download = "ECharts报表.png";

aLink.href = URL.createObjectURL(blob);

aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window}));

5月 12, 2023

ECharts的安装和实现

作者 5xue 在 Javascript

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts有下面几种定制：
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件。

下载地址
1. 官网下载
地址：https://echarts.apache.org/zh/builder.html

2. 其它下载地址
https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

ECharts目前最新版本为5.1.2，发布于2021.6.9。

使用时建议下载到本地服务器。

ECharts 实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; 第一个 ECharts 实例</title>
	<!--引入echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option);
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – 第一个 ECharts 实例</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

tooltip: {},

legend: {

data:['销量']

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option);

</script>

</body>

</html>

浏览实例

4月 26, 2023

js实现单击英文文本取词

作者 5xue 在 Javascript

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单击英文文本取词</title>
</head>
<body>
<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>
<script>
var obj = document.querySelector('div');
var s1 = obj.innerHTML;
var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
obj.innerHTML = s2;
var sps = document.querySelectorAll('.word');
sps.forEach((item, index) => {
	item.onclick = function(event) {alert(event.target.innerHTML)};
})
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>单击英文文本取词</title>

</head>

<body>

<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>

var obj = document.querySelector('div');

var s1 = obj.innerHTML;

var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');

obj.innerHTML = s2;

var sps = document.querySelectorAll('.word');

sps.forEach((item, index) => {

item.onclick = function(event) {alert(event.target.innerHTML)};

})

</script>

</body>

</html>

样例：http://5xue.cc/wp-content/uploads/samples/20230426

4月 25, 2023

关于audio标签使用动态生成的mp3无法拖拽进度条的问题

作者 5xue 在 php开发

html5 audio video不需要插件即可播放音频和视频，currentTime可以用来设置播放的起始时间，使得可以不从文件开头开始播放。如果 html5 audio video设置currentTime失效，无法设置开始播放的时间点，audio/video不能拖动进度条调整播放进度，很有可能是使用了php asp jsp等服务器后端语言动态输出待播放的媒体文件内容，如果audio/video播放的媒体资源文件不是静态文件，不经过处理直接通过服务器语言动态输出流媒体内容，设置currentTime不会生效。

为什么直接使用静态的.mp3 .mp4 .flac等媒体文件时支持使用 audio | video .currentTime = NUMBERIC; （NUMBERIC是一个数字，可以是整数，也可以是浮点数）来设置播放起始位置呢，而动态输出流媒体文件内容时不行呢？

这其中的核心技术就是服务器端对断点续传的支持，断点续传允许客户端从服务器提取某个文件指定字节范围内的一部分内容，当下载中断以后再次下载时可以只请求下载原先没有下载的部分，避免重复传输现有内容。当客户端（浏览器）检测到服务器支持断点续传以后才会发送相应的区间内容请求给服务器，服务器接到请求以后再返回相应范围内的文件内容，这样才能实现流媒体文件的定点播放。而直接使用静态文件做播放资源时，服务器软件通常会自动处理断点续传请求。

实现动态流媒体文件支持通过HTML5 audio/video.currentTime设置播放起始时间点，可以使用以下两种方法。

方法一：

使用服务器模块X-SendFile输出流媒体文件内容来解决currentTime失效的问题，以Apache服务器为例。

首先下载mod_xsendfile，将模块文件复制到Apache的modules目录，在Apache配置文件中添加
LoadModule xsendfile_module modules/mod_xsendfile.so
XSendFile On
XSendFilePath D:/server
复制代码其中XSendFilePath意思是将指定的文件夹路径添加到白名单中，指定文件夹中的文件可以被Apache直接发送给客户端，除了设置的文件夹本身以外，该文件夹包含的各级子目录也在允许范围内。配置完服务器以后重启Apache服务器以后X-SendFile模块有效。

安装了X-SendFile模块以后，PHP输出媒体文件变得非常简单。其中的Content-Type是要输出文件的MIME类型，可以不必写死而通过服务器语言获取。可以参见方法二有实例代码。

方法二：

使用服务器语言模拟断点续传支持让HTML5 audio/video.currentTime生效，以PHP为例。

如果没有服务器配置权限，可以在动态语言中发送Accept-Ranges: bytes和Content-Range: bytes S-E/FILESIZE两个响应头，告诉客户端它请求的服务器资源支持断点续传，服务器端接收到客户端发送的请求以后，从请求头拿到需要发送的内容区间，然后从文件中读取指定起止位置的数据发送到客户端即可解决HTML5 audio/video使用后端语言动态输出媒体文件内容造成的currentTime失效以及无法手动拖动进度条的问题。其中S和E分别是当次请求的起始位置索引和结束位置索引，FILESIZE为代表文件尺寸的总字节数，源码如下：

<?php
function downloadmp3($file) {
	$fileSize = filesize($file);
	$etag = md5(filemtime($file));
	$fp = fopen($file, 'rb');
	if (!$fp) {
		die('Could not open file');
	}
	$start = 0;
	$end = $fileSize - 1;

	if (isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])) {
		//获取请求头中的Range字段
		$range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes=')));

		$start = $range[0];
		if ($range[1] > 0) {
			$end = $range[1];
		}

		//构造断点续传响应头
		header('HTTP/1.1 206 Partial Content');
		header('Status: 206');
		header('Accept-Ranges: bytes');
		header('Content-Range: bytes ' . $start. '-' . $end . '/' . $fileSize);
		header('Content-Length: ' . ($end - $start + 1));
	} else {
		header('Content-Length: ' . $fileSize);
	}

	header('Content-Type: audio/mpeg');
	header('Last-Modified: ' . date('D, d M Y H:i:s \G\M\T', filemtime($file)));
	header('ETag: "' . $etag . '"');
	header('Expires: 0');

	if ($start > 0) {
		fseek($fp, $start); //移动文件指针
	}

	$bytesPosition = $start;
	while (!feof($fp) && $bytesPosition <= $end) {
		$chunk = 1024 * 1024 * 50; //每次读取50k
		if ($bytesPosition + $chunk > $end + 1) {
			$chunk = $end - $bytesPosition + 1;
		}

		$chunk = fread($fp, $chunk);
		if (!$chunk) {
			die('Could not read file');
		}

		print($chunk);
		flush();

		$bytesPosition += $chunk;
	}
	fclose($fp);
}
?>

<?php

function downloadmp3($file) {

$fileSize = filesize($file);

$etag = md5(filemtime($file));

$fp = fopen($file, 'rb');

if (!$fp) {

die('Could not open file');

}

$start = 0;

$end = $fileSize - 1;

if (isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])) {

//获取请求头中的Range字段

$range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes=')));

$start = $range[0];

if ($range[1] > 0) {

$end = $range[1];

}

//构造断点续传响应头

header('HTTP/1.1 206 Partial Content');

header('Status: 206');

header('Accept-Ranges: bytes');

header('Content-Range: bytes ' . $start. '-' . $end . '/' . $fileSize);

header('Content-Length: ' . ($end - $start + 1));

} else {

header('Content-Length: ' . $fileSize);

}

header('Content-Type: audio/mpeg');

header('Last-Modified: ' . date('D, d M Y H:i:s \G\M\T', filemtime($file)));

header('ETag: "' . $etag . '"');

header('Expires: 0');

if ($start > 0) {

fseek($fp, $start); //移动文件指针

}

$bytesPosition = $start;

while (!feof($fp) && $bytesPosition <= $end) {

$chunk = 1024 * 1024 * 50; //每次读取50k

if ($bytesPosition + $chunk > $end + 1) {

$chunk = $end - $bytesPosition + 1;

}

$chunk = fread($fp, $chunk);

if (!$chunk) {

die('Could not read file');

}

print($chunk);

flush();

$bytesPosition += $chunk;

}

fclose($fp);

}

分类目录Web开发