主要是是pixelRatio设置过大,导致导出图片为空白。所以需要根据需求重新设置的大小。
echarts官方文档介绍
toolbox.feature.saveAsImage. pixelRatio
保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2。
eharts画饼图,有数据,但没有绘制canvas画布,显示视图空白,找半天没找到原因。求大神解惑!!!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190802235910880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG...
最近接到反馈,先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点,并把这个节点截取生成图片下载下来;
首先把这个节点显示出来发现节点是正常的
那么问题就出现在获取节点上,这里使用到了html2canvas将节点转化为 base64 格式的图片,打印一下这个文件:
ok, 是空白的;
当页面缩小及生成图片滚动页面时,会出现类似问题,后来发现是页面有滚动条时会出现截图失败;
查阅文档还可以通过获取截图范围的精确位置截图;
我们需要的是截图区域左上角的 x, y 坐标,以及截图
1)html2canvas 截图
//两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
html2canvas(document.getElementById('id')) // 根据id截图
.then(function(canvas) {
document.body.appendChild(canvas); // 截图成功后做什么
2)jspdf 生成
导出
pdf
npm install jspdf --save
我想
导出
包含Chart.js
图表
作为图标的div。所有元素都显示得非常好,但是,Chart.js画布不会呈现。html2canvas Chart.js
图表
未呈现我在我的
图表
中的onAnimationComplete选项的回调中调用了我的
导出
函数,因此
导出
无法在
图表
完全构建之前发生。这是我html2canvas和下载功能怎么看:download() {this.dl.download = t...
因为项目关系,需要
导出
word文件,里面包含表格,
echarts
图。但是
导出
后,发现图上没数据。原因是echart是动态的,所以要将animation设为false。
//初始化
echarts
mounted: function() {
var chartDom = document.getElementById('main1');
var myChart =
echarts
.init(chartDom);
var option;
option = {
查看报错发现是无法获取node节点,通过研究发现其实是pc端不支持canvas 2d。
我们只需要在ec-canvas组件里写上 force-use-old-canvas="true"即可
<ec-canvas id="{{ chartLineId }}" canvas-id="{{ canvasId }}" force-use-old-canvas="true">
</ec-canvas>
举个例子,我在
Echarts
的官方示例中找到了它
网址:https://
echarts
.apache.org/examples/zh/editor.html?c=custom-gantt-flight
点击右上角的下载示例,将下载好的文件放入pycharm中(只要是编译器就可以,但不能直接点开,因为数据文件需要渲染)
问题一(与原因对应)
C:/Windows/Fonts linux 复制到 /home/Fonts。原因: 设置的字体路径有问题或则没有设置字体。只展示数字和字母 ,不展示汉字。解决办法 : 指定C盘字体。
开始一点思路都没有,百度了之后找到一个我个人觉得很不错的方法。上代码:
首先肯定是写按钮,给按钮加点击
导出
事件
<a-button size="small" @click="tableToExcel">
导出
表格</a-button>
methods:{
tableToExcel() {
// 用,隔开,一个逗号就是一个单元格
let str = '时间,商品名称,商品ID,
项目上需要实现
导出
和打印html,本来直接调用的window.print,结果发现
echarts
图表
无法打印,会是空白的,网上搜索了一下,都是采用转换为64位编码,感觉比较麻烦,找到了另一种办法,利用html2canvas直接将页面转换为canvas,再打印canvas就行了。
// 打印日报
$("#printall").on("click", functio...