美文网首页夏末浅笑微信小程序开发微信小程序开发
微信小程序之复杂富文本解析变通实现

微信小程序之复杂富文本解析变通实现

作者: 剪影Boy | 来源:发表于2017-02-20 16:14 被阅读2069次

最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的textimage标签可以呈现。而更复杂的,比如表格,则比较棘手,不管是服务端解析还是小程序呈现都很费劲,也很难覆盖所有情况。于是我想,将表格对应的HTML代码转成图片,不失为一种变通的方法。

这里我们采用node-webshot模块,它对PhantomJS进行了轻量封装,可以轻松地将网页以截图形式保存下来。

首先安装Node.jsPhantomJS,然后新建一个js文件,加载node-webshot模块:

const webshot = require('webshot');

定义选项:

const options = {
    // 浏览器窗口
    screenSize: {
        width: 755,
        height: 25
    },
    // 要截图的页面文档区域
    shotSize: {
        height: 'all'
    },
    // 网页类型
    siteType: 'html'
};

这里,浏览器窗口的宽度要根据网页情况合理设置,高度可以设置为一个很小的数值,然后页面文档区域的高度一定要设置为all,宽度默认为窗口宽度,这样就可以把表格以最小的尺寸完整截图。

接下来,定义html字符串:

let html = "target rich text html code, eg: <table>...</table>";

注意,里面的HTML代码一定要去掉换行符,并将双引号替换为单引号。

最后,截图:

webshot(html, 'demo.png', options, (err) => {
    if (err)
        console.log(`Webshot error: ${err.message}`);
});

这样,就实现了从HTML代码到本地图片的转换,后续可以上传到七牛云等。不管是服务端的解析,还是小程序的呈现,都没有什么难度了...

个人技术博客 biebu.xin,原文链接——微信小程序之复杂富文本解析变通实现

相关文章

网友评论

  • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

    非常感谢~~~
    剪影Boy:可以的

本文标题:微信小程序之复杂富文本解析变通实现

本文链接:https://www.haomeiwen.com/subject/sadewttx.html