1 下载

FileSaver.js https://github.com/eligrey/FileSaver.js
wordexport.js https://jquery.com/download/

2 设置一个导入按钮

<div id='detail'>xxx</div>
<h2><a class="word-export" href=""> 结果输出 </a></h2>

3 script语句

<script src="'js/FileSaver.js"></script>
<script src="js/jquery.wordexport.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("a.word-export").click(function(event) {
            $("#detail").wordExport("关联分析结果");
            });
    });
</script>

至此就可以导出id为detail的div块中的内容为word文档了。

4 echarts图像处理

如果页面中有echarts图像，直接导出div块无法显示图片，需要以下几个操作才能在word文档里展示图片

4.1 设置不可见img标签

需要在echarts绑定的div块下加一个不可见的img标签

<div class="video_wrapper">
    <div id="relation_change" style="height:500px;">
    </div>
</div>
<img src="" id="relation_change_pic" style="display:none;"/>

4.2 允许页面通过ajax post内容

<script>
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        })
</script>

4.3 将Echarts图像的动画效果取消

在option里加入animation:false,即可

4.4 调用Echarts方法生成图像，并通过ajax绑定到不可见img标签

在echarts生成的script代码块中插入这段内容

var picInfo = myChart.getDataURL();//获取柱状图的base64
echartImg(picInfo,"relation_change_pic","relation_change");  //替换成图片
function echartImg(baseimg,img,div){
    $.ajax({
        type:"POST",
        url: "/toimg/",
        data:{'base64Info':baseimg},
        success:function(data){
             data = JSON.parse(data);
             if(data["code"]==1){
                   $('#'+img).attr('src', data["src"]);
             }
     }
})}

后端的代码如下

def toimg(request):
    src = request.POST.get('base64Info')
    status = 1
    # print(src)
    return HttpResponse(json.dumps({
        "code": status,
        "src": src
    }))

这样就可以导出echarts的图像了。