用户登录
用户注册

分享至

echarts图导出word

  • 作者: 喂---出来啦
  • 来源: 51数据库
  • 2020-04-21

利用 jquery.wordexport.js 插件将Echarts图表导出到word文档

你好! 经过简单测试,不利用后台也可以将Echarts图表导出到word文档。

需要修改插件源码,以及简单设置html元素。 说下原理:1. html中设置一个与echarts图表相同style的元素,包裹一个空白的image元素, 初始隐藏;2. echarts图表 -> getDataURL() -> 获取到对应的base64编码;3. 将编码赋值给上面image元素的src;4. 导出word前,将echarts图表隐藏,显示 步骤1 中的元素;5. 修改插件源码,在源码中处理image元素的地方,对src属性进行了base64编码的判断, 并做响应的处理。

其中非base64格式的,会在图片后面插入一个canvas元素;6. 由于第5点中,会在图片后面插入一个canvas元素,页面会有空白内容出现, 从而影响美观。解决方案是在页面设置一个隐藏元素,调用导出函数之前, 将含有导出内容赋值给这个隐藏元素,然后将这个隐藏元素的内容导出word即可。

当然如果页面其他图片都是base64编码的情况下,直接调用导出函数即可。部分代码片段: html片段 。

。 我是一只小小鸟I'm a little bird。

Hello, world!php..

。

。

jsjQuery(document).ready(function($) { initChart(); $("a.jquery-word-export").click(function(event) { var picBase64Info = myChart.getDataURL(); $("#img_charts").attr("src", picBase64Info); $("#main").hide(); $("#imgDiv").css("display", "block"); setTimeout(function(){ $("#page-content2").html($("#page-content").html()); $("#page-content2").find("div:eq(0)").text("我是一只大灰狼..The Big Bad Wolf"); $("#page-content2").wordExport('测试'); }, 3000); });}); 源码修改 var isBase64 = function(src) { _regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i; return _regex.test(src); }; // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length;="" i++)="" {="" calculate="" dimensions="" of="" output="" image="" var="" w="Math.min(img[i].width," options.maxwidth);="" var="" h="img[i].height" *="" (w="" img[i].width);="" create="" canvas="" for="" converting="" image="" to="" data="" url="" if="" (isbase64(img[i].src))="" {="" var="" uri="img[i].src;" images[i]="{" type:="" uri.substring(uri.indexof(":")="" +="" 1,="" uri.indexof(";")),="" encoding:="" uri.substring(uri.indexof(";")="" +="" 1,="" uri.indexof(",")),="" location:="" uri,="" data:="" uri.substring(uri.indexof(",")="" +="" 1)="" };="" }="" else="" {="" var="" img_id="#" +="" img[i].id;="">').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id); } }希望对你有帮助!。

python输出word内容

程序导出word文档的方法将web/html内容导出为world文档,再java中有很多解决方案,比如使用Jacob、Apache POI、Java2Word、iText等各种方式,以及使用freemarker这样的模板引擎这样的方式。

php中也有一些相应的方法,但在python中将web/html内容生成world文档的方法是很少的。其中最不好解决的就是如何将使用js代码异步获取填充的数据,图片导出到word文档中。

1. unoconv功能:1.支持将本地html文档转换为docx格式的文档,所以需要先将网页中的html文件保存到本地,再调用unoconv进行转换。转换效果也不错,使用方法非常简单。

\# 安装sudo apt-get install unoconv\# 使用unoconv -f pdf *.odtunoconv -f doc *.odtunoconv -f html *.odt缺点:1.只能对静态html进行转换,对于页面中有使用ajax异步获取数据的地方也不能转换(主要是要保证从web页面保存下来的html文件中有数据)。2.只能对html进行转换,如果页面中有使用echarts,highcharts等js代码生成的图片,是无法将这些图片转换到word文档中;3.生成的word文档内容格式不容易控制。

2. python-docx功能:1.python-docx是一个可以读写word文档的python库。使用方法:1.获取网页中的数据,使用python手动排版添加到word文档中。

from docx import Documentfrom docx.shared import Inchesdocument = Document()document.add_heading('Document Title', 0)p = document.add_paragraph('A plain paragraph having some ')p.add_run('bold').bold = Truep.add_run(' and some ')p.add_run('italic.').italic = Truedocument.add_heading('Heading, level 1', level=1)document.add_paragraph('Intense quote', style='IntenseQuote')document.add_paragraph('first item in unordered list', style='ListBullet')document.add_paragraph('first item in ordered list', style='ListNumber')document.add_picture('monty-truth.png', width=Inches(1.25))table = document.add_table(rows=1, cols=3)hdr_cells = table.rows[0].cellshdr_cells[0].text = 'Qty'hdr_cells[1].text = 'Id'hdr_cells[2].text = 'Desc'for item in recordset:row_cells = table.add_row().cellsrow_cells[0].text = str(item.qty)row_cells[1].text = str(item.id)row_cells[2].text = item.descdocument.add_page_break()document.save('demo.docx')from docx import Documentfrom docx.shared import Inchesdocument = Document()for row in range(9):t = document.add_table(rows=1,cols=1,style = 'Table Grid')t.autofit = False #很重要!w = float(row) / 2.0t.columns[0].width = Inches(w)document.save('table-step.docx')缺点:1.功能非常弱。有很多限制比如不支持模板等,只能生成简单格式的word文档。

程序导出PDF文档方法1.pdfkit功能:1.wkhtmltopdf主要用于HTML生成PDF。2.pdfkit是基于wkhtmltopdf的python封装,支持URL,本地文件,文本内容到PDF的转换,其最终还是调用wkhtmltopdf命令。

是目前接触到的python生成pdf效果较好的。优点:1.wkhtmltopdf:利用webkit内核将HTML转为PDFwebkit是一个高效、开源的浏览器内核,包括Chrome和Safari在内的浏览器都使用了这个内核。

Chrome打印当前网页的功能,其中有一个选项就是直接“保存为 PDF”。2.wkhtmltopdf使用webkit内核的PDF渲染引擎来将HTML页面转换为PDF。

高保真,转换质量很好,且使用非常简单。使用方法:\# 安装pip install pdfkit\# 使用import pdfkitpdfkit.from_url('', 'out.pdf')pdfkit.from_file('test.html', 'out.pdf')pdfkit.from_string('Hello!', 'out.pdf')缺点:1.对使用echarts,highcharts这样的js代码生成的图标无法转换为pdf(因为它的功能主要是将html转换为pdf,而不是将js转换为pdf)。

对于纯静态页面的转换效果还是不错的。2.其他其他生成pdf的插件还有:weasyprint,reportlab,PyPDF2等,经简单试验都不如pdfkit效果好,且有些用法复杂。

如何把表格转换成图表-如何将excel表格转换成word文档?如何将excel

Excel强大的制表功能让很多办公一族都忘不了它的方便与实用。

可是在一些情况下,我们必须将Excel表格转换成Word文档。当前普遍的做法是:先用Excel做好表格,再把表粘到Word里。

可是粘到Word里后表的格式全变了,还得重新进行调试,费时又费力。 其实,完全可以按下述方法来轻松转换。

首先,用Excel编辑好一个表格,然后点击“文件”→“另存为web页”。web页就是网页文件,在“保存选项”处把“保存整个工作簿”调整成“选择:工作表”,把默认文件名“page。

htm”根据实际情况改成你所需要的名字,如:“工作表。 htm”,再点击“保存”。

注意,在改名时绝对不可以把后面的。htm去掉,只要改“。”

前面的部分就可以了。 找到刚才保存好的“工作表。

htm”,如果你所安装的操作系统是WindowsXP或Windows2000,可以在文件上面直接点击鼠标右键,选择“打开方式”最下面的“打开程序”选项,在列表中找到“Word”,选中并确定。 如果你所使用的操作系统是windows98,则操作方法略有不同,需要在“工作表。

htm”上按住shift键的同时点击鼠标右键,之后再进行上述操作。 用Word程序打开该文件后,不要做任何编辑操作,直接点击“文件”→“另存为”,把文件名改成“工作表Word版”,把保存类型选成“Word文档”,再点击“保存”即可。

希望能帮助到你,麻烦点击"有用",谢谢!。

转载请注明出处51数据库 » echarts图导出word

软件
前端设计
程序设计
Java相关