js 导出html为doc

最新推荐文章于 2024-04-19 00:30:19 发布

tang05709

最新推荐文章于 2024-04-19 00:30:19 发布

阅读量592

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/tang05709/article/details/104377950

版权

js 专栏收录该内容

109 篇文章 0 订阅

订阅专栏

js导出word使用了插件： jquery.wordexport.js和FileSaver.js

https://github.com/markswindoll/jQuery-Word-Export

https://github.com/eligrey/FileSaver.js/

并且依赖jquery

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 模板</title>
  <style>
      html, div, p{
          margin: 0; 
          padding: 0;
      }
      p {
        margin: 5px 0;
        margin-left: 20px;
        line-height: 28px;
      }
     
      .export-word {
        width: 120px;
        margin: 0 auto;
        margin-top: 50px;
        text-align: center;
        padding-bottom: 100px;
      }
      .export-word button {
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #dddddd;
      }
  </style>
</head>
<body>
  <div class="content-main" style="width: 1240px; margin: 0 auto;border: 1px dashed #ddd;font-size: 14px;">
    <div style="padding: 50px;">
      <div style="font-size: 30px; font-weight: bold;text-align: center;">试卷</div>
      <div class="question-list">
        <div style="font-weight: bold;font-size: 16px;margin-top: 50px;margin-bottom: 10px;">单选题</div>
        <div class="list-body">

          <div style="margin-bottom: 20px;">
            <div style="margin-bottom: 10px;">1.下列变化中属于化学变化的是</div>
            <div class="question-item">
              <p>A “干冰”升华</p>
              <p>B 车胎爆炸</p>
              <p>C 铁生锈</p>
              <p>D 灯泡通电发光</p>
            </div>
          </div>
          <div style="margin-bottom: 20px;">
            <div style="margin-bottom: 10px;">2.空气质量日报是环境监测部门对一个地区空气质量情况所做的监测报告。目前计入空气主要污染物的是一氧化碳、二氧化氮、二氧化硫、可吸入颗粒物和臭氧等。下列情况能直接造成空气污染的是</div>
            <div class="question-item">
              <p>A 把煤作为主要燃料</p>
              <p>B 使用含磷洗衣粉</p>
              <p>C 随意丢弃废电池</p>
              <p>D 利用太阳能、风能等清洁能源</p>
            </div>
          </div>
          

        </div>
      </div>

    </div>
  </div>

  <div class="export-word"><button>导出为word</button></div>

  <script src="/assets/aad7f4a/jquery.js"></script>
  <script src="/js/FileSaver.min.js"></script>
  <script src="/js/jquery.wordexport.js"></script>
  <script>
        $(function () {
            $(".export-word button").click(function (event) {
              var styles = ' html, div, p{margin: 0; padding: 0;} p {margin: 5px 0;margin-left: 20px;line-height: 28px;}';
              $(".content-main").wordExport("question", styles)
            });
        })
    </script>
</body>
</html>

源码是的style是需要在源码中写的，我修改了下源码

第3行：$.fn.wordExport = function(fileName) 改为 $.fn.wordExport = function(fileName, styles)

第65行： var styles = ‘’; 改为 var styles = styles;

关于跨域

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function($) {
        $.fn.wordExport = function(fileName, styles) {
            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++) {
                img[i].crossOrigin = "Anonymous";
                // 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.width = w;
                canvas.height = h;
                // Draw image to canvas
                var context = canvas.getContext('2d');
                // 跨域
                newImg = new Image();
                newImg.width = w
                newImg.height = h
                newImgBase64 = '' ;//base64 
                newImg.src = img[i].src
                newImg.setAttribute("crossOrigin",'Anonymous'); //设置图片的跨域属性
                newImg.onload = function(){//图片加载完，再draw 和 toDataURL                     
                    context.drawImage(newImg,0, 0, w, h);                     
                    newImgBase64 = canvas.toDataURL("image/png");                 
                };  

                // Get data URL encoding of image
                //var uri = canvas.toDataURL("image/png");
                var uri = newImgBase64;
                $(img[i]).attr("src", img[i].src);
                img[i].width = w;
                img[i].height = h;
                // 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[i]).attr("src"),
                    data: uri.substring(uri.indexOf(",") + 1)
                };
                
            }

            // 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].location + "\n";
                mhtmlBottom += "Content-Type: " + images[i].type + "\n";
                mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
                mhtmlBottom += images[i].data + "\n\n";
            }
            mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

            //TODO: load css from included stylesheet
            var styles = styles;

            // 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;

            // Create a Blob with the file contents
            var blob = new Blob([fileContent], {
                type: "application/msword;charset=utf-8"
            });
            saveAs(blob, fileName + ".doc");
        };
    })(jQuery);
} else {
    if (typeof jQuery === "undefined") {
        console.error("jQuery Word Export: missing dependency (jQuery)");
    }
    if (typeof saveAs === "undefined") {
        console.error("jQuery Word Export: missing dependency (FileSaver.js)");
    }
}

tang05709

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 导出html为doc

js导出word使用了插件：jquery.wordexport.js和FileSaver.jshttps://github.com/markswindoll/jQuery-Word-Exporthttps://github.com/eligrey/FileSaver.js/并且依赖jquery<!DOCTYPE html><html><head...
复制链接

扫一扫