jquery.wordexport.js导出word文件含图片 |
您所在的位置：网站首页 › 批量导出word图片的方法 › jquery.wordexport.js导出word文件含图片 |
jquery.wordexport.js导出word文件含图片
|
需要用的到插件 jquery.wordexport.js(源码地址：jquery.worldexport.js)FileSaver.jshttps://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.jsjquery.worldexport.js导出world最主要的问题是： 1.图片的导出。 2.源代码仅支持内联样式而页级css样式并不能生效。 3.复杂的dom样式以及效果如何导出。 针对问题一，二的解决方案就是：修改jquery.wordexport的源码。让他支持页级Css生效以及图片src是http或者https链接的导出。修改之后的代码如下： 第一个修改点就是传入style字符串集，对页级css样式的支持（似乎就是原作者还未TODO的项）。 第二个点就是对img的处理。注释掉对应的代码添加上新的代码，可以对照着源码查看（代码来自：https://blog.csdn.net/weixin_43639981/article/details/107492220）。 最后附上源码如下： DOCTYPE html> JS导出Word文档 .myh1 { color: red; font-size: 50px; } .myp { font-size: 20px; font-weight: bold; color: orange; } .my-table, .my-tr, .my-td, .my-th { padding: 5px; border: 1px solid black; border-collapse: collapse; border-spacing: 0px; } .my-th { background-color: orange; } .my-div { width: 200px; height: 200px; } .my-img { width: 100%; height: 100%; } JS导出Word文档 1.JS导出Word文档含https图片 2.JS导出Word文档含复杂样式先转换成图片在导出 更新 Github 模板 王小虎 提交于 2018/4/12 20:46 更新 Github 模板 王小虎 提交于 2018/4/3 20:46 更新 Github 模板 王小虎 提交于 2018/4/2 20:46 转换成图片如下: 在转换成图片的过程中跟实际的样式会有出入的: 操作 用户名 kooriookami 手机号 18100000000 居住地 苏州市 备注 学校 联系地址 江苏省苏州市吴中区吴中大道 1188 号 3.JS导出Word文档简单表格 Table with colgroup Countries Capitals Population Language USA Washington D.C. 309 million English Sweden Stockholm 9 million Swedish var vm = new Vue({ el: '#app', data() { return { size: '' } }, methods: { exportWorld() { $("#app").wordExport('word文档', document.getElementById('style').innerText); } } }) function Dom2Img(el, elImgName) { html2canvas(el, { // 页面高度 height: el.height, // 页面宽度 width: el.width, }).then((canvas) => { //图片src赋值 document.getElementById(elImgName).src = canvas.toDataURL() //图片下载 var download = document.createElement("a"); download.href = canvas.toDataURL() download.setAttribute('download', 'download.png'); //download.click(); //console.log(download); }) } // 将html转换成img Dom2Img(document.getElementById("el-timeline-box"), 'el-timeline-img') Dom2Img(document.getElementById("el-descriptions-box"), 'el-descriptions-img') console.log(document.getElementById('style').innerText) $(function () { $("input[type='button']").click(function (event) { $("#app").wordExport('word文档', document.getElementById('style').innerText); }); });jquery.wordexport.js if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn.wordExport = function (fileName, style) { fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export"; var static = { mhtml: { top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n\n\n_html_", head: "\n\n\n_styles_\n\n\n", body: "_body_" } }; var options = { maxWidth: 624 }; // Clone selected element before manipulating it var markup = $(this).clone(); // Remove hidden elements from the output markup.each(function () { var self = $(this); if (self.is(':hidden')) self.remove(); }); // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i |
针对问题三解决方案就是：利用html2canvas.js将复杂的dom节点样式转换成canvas然后在取base64添加到img标签上在转world。【本文地址】
今日新闻 |
推荐新闻 |