jquery+wordexport+FileSaver exports word files (doc format)

Preparation

//必要的js文件
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jquery.wordexport.js"></script>

This link is a compressed package of several JSsource files that you need to download by yourself.
The extraction code is Mont
Baidu Netdisk. Please enter the extraction code.

//pdf
        handleExportPDF(){
            var self=this;
            var exportMain = $("#exportPDF").clone();
                exportMain.find("input").each(function() {
                    if ($(this).attr("type") != "hidden") {
                        if ($(this).attr("type") == "radio") {
                            if ($(this).is(":checked")) {
                                $(this).after("√");
                            }
                        } else {
                            var html = $(this).val();
                            $(this).after("<lable>" + html + "</lable>");
                        }
                    }
                    $(this).remove();
                });
                exportMain.find("button").each(function() {
                    $(this).remove();
                });
                exportMain.find(".el-input").each(function(i,item) {
                    var html = item.innerText;
                    $(this).after("<lable>" + html + "</lable>");
                    $(this).remove();
                });
                
                exportMain.find(".beizhu").each(function() {
                    $(this).remove();
                });
                
                exportMain.find("textarea").each(function() {
                    if ($(this).attr("type") != "hidden") {
                        var html = $(this).val();
                        $(this).after("<lable>" + html + "</lable>");
                    }
                    $(this).remove();
                });
                exportMain.wordExport(self.rptName.replace(/<[^>]+>/g,""));
        },

wordexport.js needs to convert images in html to base64 form

Moreover, the width of the image is high. It is best to set it yourself. Otherwise, the downloaded image will be downloaded in the original size of the image, and the image will exceed the document. The method of
processing the image will not be explained here. You can search it yourself. !

However, when I exported the table to word, I found that the style was not exported, so I wrote the Style in the tag for the time being.

<table class="layui-table" style="color: red;background-color: black;">

//图片格式转换为base64
function convertImagesToBase64 (content) {
      var regularImages = content.querySelectorAll("img");
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      [].forEach.call(regularImages, function (imgElement) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = imgElement.width;
        canvas.height = imgElement.height;
 
        ctx.drawImage(imgElement, 0, 0);
        var dataURL = canvas.toDataURL();
        imgElement.setAttribute('src', dataURL);
      })
      canvas.remove();
    }
var content = document.getElementById('#content');
convertImagesToBase64(content);//转换图片为base64
 
content = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head>'+ content +'</html>'

jquery+wordexport+FileSaver exports word files (doc format)

Guess you like