jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js

参考资料： jQuery-Word-Export导出word_jquery.wordexport.js下载-CSDN博客

近期又需要自己做个 Html2Doc 的解决方案，因为客户又不想要 Html2pdf 的下载了，当初还给我费尽心思解决Html转pdf时中文输出的问题（html转pdf文件下载之最合理的方法支持中文_jspdf.umd.min.js-CSDN博客）以及手机端下载pdf的问题（手机端 Android WebView 获取 blob 链接文件名并下载网页动态生成的 pdf 文件且调用外部程序打开_blob链接怎么打开-CSDN博客）

查了下，基于 IIS 的解决方案，感觉还是参考资料中的相对靠谱，测试了一下，页面上的例子正确工作，输出文件正确，之后逐步添加不同元素测试也正常，但是到加了 img 时就报错了：

问 AI 说是叫检查 jquery.word.export.js 的第 33行：

$('<canvas>').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter(img_id);

看了前后代码，发现是 img 元素没有 id 造成的，这样的话，就需要修复 jquery.word.export.js，以下是修复后的代码，不管 img 有没有 id 都能正确输出了，当然，是交给通义千问去修复的：

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function ($) {
        $.fn.wordExport = function (fileName) {
            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<!DOCTYPE html>\n<html>\n_html_</html>",
                    head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
                    body: "<body>_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 < 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);

                // Ensure each image has a unique id
                var img_id = img[i].id || "dynamic_img_" + i;
                if (!img[i].id) {
                    $(img[i]).attr("id", img_id);
                }

                $('<canvas>').attr("id", "test_word_img_" + i).width(w).height(h).insertAfter("#" + img_id);

                // Create canvas for converting image to data URL  
                var canvas = document.createElement("CANVAS");
                canvas.width = w;
                canvas.height = h;
                // Draw image to canvas  
                var context = canvas.getContext('2d');
                context.drawImage(img[i], 0, 0, w, h);
                // Get data URL encoding of image  
                var uri = canvas.toDataURL("image/png");
                // Save encoded image to array  
                images[i] = {
                    type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
                    encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
                    location: "#" + img_id,
                    data: uri.substring(uri.indexOf(",") + 1)
                };

                // Replace original image with canvas in markup
                $("#" + img_id).replaceWith(canvas);
            }

            // Prepare bottom of mhtml file with image data  
            var mhtmlBottom = "\n";
            for (var i = 0; i < images.length; i++) {
                mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
                mhtmlBottom += "Content-Location: " + images[i].lo