前端将html导出为word文档（原生js篇）

奋斗中的橘子

已于 2022-07-14 20:47:38 修改

阅读量6.5k

点赞数 7

分类专栏： js 导出文章标签： html生成doc html javascript html5 前端

于 2019-11-27 16:19:36 首次发布

本文链接：https://blog.csdn.net/qq_41248310/article/details/103277952

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

导出

1 篇文章 0 订阅

订阅专栏

主要是参考了插件：jquery.wondexport.js 👈

下载的文档包含图片，文档类型可为doc、wps

结果预览

💡 原理

将 html 内容转为 mhtml 数据，再通过 Blob 转成文件下载。详细步骤如下：

将要导出的dom节点clone()，防止对节点做操作（如通过改样式使导出的文档标题居中、删除不需要的节点）影响了html页面上展示的内容。
图片处理：

1. 找到所有的图片进行遍历
2. 将图片转为canvas
3. 通过canvas.toDataURL( ) 得到base64

根据 mhtml 模板，替换已处理好的数据。
通过 Blob 转成文件下载

📄 完整demo

<!doctype html>
<html>
<head>
    <title>搞笑哲理故事</title>
</head>
<style>
    .down_load{
        width: 90px;
        height: 36px;
        background-color: red;
        text-align: center;
        line-height: 36px;
        color: white;
        position: fixed;
        right: 50px;
        top: 100px;
        z-index: 1999;
    }
</style>
<body>
<div class="header">
    <div class="down_load">
        下载
    </div>
</div>
<div class="main">
    <div class="article">
        <h1 class="title">搞笑哲理故事</h1>
        <div class="content">
            <h2>　　搞笑哲理故事</h2>
            <p>　　一只火鸡和一头牛闲聊，火鸡说：我盼望能飞到树顶，可我没有勇气。
            <p style="text-align: center;">
                <img src="./img/2_qq_41248310.jpg" />
            </p>
            <p>　　牛说：为什么不吃一点我的牛粪呢，他们很有养分。</p>
            <p>　　火鸡吃了一点牛粪，发明它确切给了它足够的力气飞到第一根树枝，</p>
            <p>　　第二天，火鸡又吃了更多的牛粪，飞到第二根树枝，</p>
            <p>　　两个星期后，火鸡自豪的飞到了树顶，</p>
            <p>　　但不久，一个农民看到了它，敏捷的把它从树上射了下来。</p>
            <p>　　生存之道：牛屎运让你到达顶峰，但不能让你留在那里。</p></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
　　$(".down_load").click(function() {
        saveData()
　　});
    function saveData(params) {
        var fileName=$('.title').text()
        var titleNode=$('.title').clone()
        $(titleNode).attr('style','text-align:center') //让标题居中
        var contentNode=$('.article').clone()
        data=wordExport(contentNode)
        downLoad(data,fileName)
    }
    function wordExport(contentNode) {
            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 = $(contentNode).clone();
            // Remove hidden elements from the output
            markup.each(function() {
                var self = $(contentNode);
                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);
                // 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");
                $(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 = "";
 
            // 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"
            });
            return fileContent
        };
    })
    /* 
    wps:kswps
    docx:msword
    */
    function downLoad(data,fileName) {
        let blob= new Blob([data], {type: "application/msword"});
        let url = URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.setAttribute("href", url);
        link.setAttribute("download", `${fileName}.doc`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>
</body>
</html>

学会这个技能就可以轻松把文章下载成word文档啦😁

❤️ 更多前端知识欢迎关注公众号交流