1. 首先要准备好对应的js文件
jquery文件,FileSaver,以及主要的jquery.wordexport
<script type="text/javascript" src="/javascripts/common/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/common/FileSaver.min.js"></script>
<script type="text/javascript" src="/javascripts/common/jquery.wordexport.js"></script>
2. 如何将样式一起导出
在jquery.wordexport.js源码中找到styles并赋值(将用到的样式类进行赋值)
//TODO: load css from included stylesheet
var styles = style; //这里是需要将你用到的样式类都放在一行,作为字符串的形式传进去,这样导出的才带有对应的样式
// Aggregate parts of the file together
var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;
3. 如何将图片导出
目前我发现的问题,主要是由于https与http引发的图片无法导出,而且你转为base64时也无法导出,解决的方案依然是修改jquery.wordexport.j代码如下:
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
var canvas = document.createElement("canvas");
canvas.style.display="none";//防止页面由于导出产生变化
canvas.width = w;
canvas.height = h;
// Draw image to canvas
img[i].src = img[i].src.replace("https","http"); //处理导出不显示的问题,如果在某些代码中出现了图片无法显示问题,可以加入该代码
$(canvas).attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id); //注释掉img处理的其他代码
//。。。 这里省略了后面的代码
加入将https修改为http的形式后,即可在导出的doc文件中看到图片
4. 我做了一个简单的示例,如有需要的可以看一下,都是没有编译的源码形式的,可直接看
测试jquery导出word(包括图片与样式)
不过目前的打开慢或者格式不对 的问题已经解决,可以参考这位作者的处理方法,很好的解决了这个问题
5.兼容base64导出方法截图如下:
修改jquery.wordexport.js文件中的代码
更多推荐
jquery word export 导出html内容无样式或无图片问题
发布评论