微信小程序 解析网页内容详解及实例


Posted in Javascript onFebruary 22, 2017

微信小程序 解析网页内容详解

最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的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代码到本地图片的转换,后续可以上传到七牛云等。不管是服务端的解析,还是小程序的呈现,都没有什么难度了...

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 #Javascript
js中document.referrer实现移动端返回上一页
Feb 22 #Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 #Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 #Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php 字符串替换的方法
2012/01/10 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
详解vue axios二次封装
2018/07/22 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
nohup的用法
2014/08/10 面试题
汽车转让协议书
2015/01/29 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2019思想汇报范文
2019/05/21 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
Java死锁的排查
2022/05/11 Java/Android