自制小工具（2）：导出模板化的 html 文件

leiting1998
1,172 阅读3分钟

本系列是本人在OPPO工作一年半中，为了解决开发或者运营的困扰，自制的一些小工具合集，特地以文章的形式记录下来，一方面作为自己的知识储备，另一方面期望能够给遇到相同问题的同学一些启发。

问题

在我们打开 app 的时候，经常会有很多隐私协议和用户声明的文档，你要同意了才能进入APP，不同版本的文档、不同app 和不同语言，我大概维护了几十篇类似文档，并且经常会因为各种各样的原因，导致需要频繁地更新文档。每次手动去修改 html 很麻烦呀，经常在开发得正爽的时候，产品告诉你，诶，麻烦开发小哥你帮我改一下这段文案。

头大、心累并且立刻深呼吸一口保证自己精神不会错乱，所以怎样应付众多版本的文档，并且快速修改上线，成了一个急需解决的问题。

分析

解决这种模版化，并且只有简单的文字和图片的项目，不就专门为富文本打造的吗？

  • 利用富文本，可以直接将 word 的内容转化为html文本。
  • 导出 html 文本，支持其他开发人员进行二次开发。
  • 导入线上的 html 文本，可以直接在原有的文档基础上进行修改。

20210402171912.png

确定了页面需要哪些功能，马上开始动手操作！

富文本

很简单，咱们使用一款免费开源的 wangEditor 富文本编辑器就行了，简单初始化一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富文本</title>
    <link rel="stylesheet" href="./editorStyle.css">
</head>
<body>
    <select id="tools">
        <button style="margin-bottom: 20px;margin-right: 20px ;float: right;" id="btn">导出html</button>
    <label>
        <input type="text" id="linkUrl" placeholder="请输入想要导入的链接地址">
        <button id="importUrl">导入页面</button>
    </label>
    </select>
    
    <section class="main-wrap">
        <div id="main"></div>
    </section>
    
    <script type="text/javascript" src="./wangEditor.min.js"></script>
    <script type="text/javascript">
        var editor = new window.wangEditor('#main')
        var config = editor.customConfig ? editor.customConfig : editor.config;
        config.uploadImgShowBase64 = true
        editor.config.height = 800
        editor.create()
    </script>
</body>
</html>

页面内主要有一个富文本展示区域，和工具区域（导入线上链接和导出html按钮）。

导出 html 文件

因为，页面可能不止一个团队使用，每个团队有自己的要求，那么需要导出 html 页面便于进行二次开发。

var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
};

document.getElementById('btn').addEventListener('click', function () {
    var html = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\"href=\"http://activity-cdo.heytapimage.com/cdo-activity/static/202102/03/maincopy20210203.css\"></head><body>{{content}}</body></html>';

    var content = document.getElementsByClassName('w-e-text')[0].innerHTML;

    funDownload(html.replace('{{content}}', content), 'result.html')
})

上一篇文档中也有涉及到导出 excel 文档，其实原理都是类似的，拼凑成一个字符串，然后生成a标签下载下来。

导入线上 html 页面

其实原理很简单，通过 iframe 加载线上的链接，加载完成后读取其中的 dom 结构即可完成相关操作。

// 删除插入的 iframe 标签
function delIframe() {
    var self = document.getElementsByTagName('iframe')[0];
    if (!self) {
        return;
    }
    var parent = self.parentElement;
    var removed = parent.removeChild(self);
}

// 利用iframe标签加载对应 html 文件（注意iframe的跨域问题）
function insertIframe(url) {
    delIframe()
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.src = url;

    if (iframe.attachEvent) {
        iframe.attachEvent("onload", function () {
            console.log("Local iframe is now loaded.");
        });
    } else {
        iframe.onload = function () {
            var doc = iframe.contentWindow.document;
            var content = doc.body.innerHTML
            editor.txt.html(content)  // wangEditor导入html文本
        };
    }
    document.body.appendChild(iframe);
}

// 取出输入的线上链接
document.getElementById('importUrl').addEventListener('click', () => {
    var val = document.getElementById('linkUrl') && document.getElementById('linkUrl').value
    if (!val) {
        return
    }
    insertIframe(val)
})

页面完成之后，极大地加快了完成任务的速度，再多来几个页面也没问题。

总结和感悟

很多问题都能够以很简单的想法简化很多流程，在这里仅仅花了30分钟开发的页面，却节省了我90%的开发和修改的时间有，将几件极为简单的逻辑组装起来，却能提高成倍的开发效率。

这个小工具让我认识到，原来不一定非得使用一些令人惊叹的技巧和精细化安排的设计，利用自己所学到的知识，就能解决工作和生活中绝大部分事情，有时候只需要一点点灵感就好了。

avatar
文章
阅读
粉丝