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内容无样式或无图片问题