我是靠谱客的博主 舒心荷花,最近开发中收集的这篇文章主要介绍微信小程序之复杂富文本解析详解,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

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

首先安装Node.js和PhantomJS,然后新建一个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代码到本地图片的转换,后续可以上传到七牛云等。不管是服务端的解析,还是小程序的呈现,都没有什么难度了。

以上就是微信小程序之复杂富文本解析详解的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是舒心荷花为你收集整理的微信小程序之复杂富文本解析详解的全部内容,希望文章能够帮你解决微信小程序之复杂富文本解析详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(114)

评论列表共有 0 条评论

立即
投稿
返回
顶部