微信小程序 解析網(wǎng)頁內(nèi)容詳解及實(shí)例
微信小程序 解析網(wǎng)頁內(nèi)容詳解
最近在寫一個(gè)爬蟲，需要將網(wǎng)頁進(jìn)行解析供微信小程序使用。文字和圖片解析都好說，小程序也有對應(yīng)的text和image標(biāo)簽可以呈現(xiàn)。而更復(fù)雜的，比如表格，則比較棘手，不管是服務(wù)端解析還是小程序呈現(xiàn)都很費(fèi)勁，也很難覆蓋所有情況。于是我想，將表格對應(yīng)的HTML代碼轉(zhuǎn)成圖片，不失為一種變通的方法。
這里我們采用node-webshot模塊，它對PhantomJS進(jìn)行了輕量封裝，可以輕松地將網(wǎng)頁以截圖形式保存下來。
首先安裝Node.js和PhantomJS，然后新建一個(gè)js文件，加載node-webshot模塊：
const webshot = require('webshot');
定義選項(xiàng)：
const options = {
// 瀏覽器窗口
screenSize: {
width: 755,
height: 25
},
// 要截圖的頁面文檔區(qū)域
shotSize: {
height: 'all'
},
// 網(wǎng)頁類型
siteType: 'html'
};
這里，瀏覽器窗口的寬度要根據(jù)網(wǎng)頁情況合理設(shè)置，高度可以設(shè)置為一個(gè)很小的數(shù)值，然后頁面文檔區(qū)域的高度一定要設(shè)置為all，寬度默認(rèn)為窗口寬度，這樣就可以把表格以最小的尺寸完整截圖。
接下來，定義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}`);
});
這樣，就實(shí)現(xiàn)了從HTML代碼到本地圖片的轉(zhuǎn)換，后續(xù)可以上傳到七牛云等。不管是服務(wù)端的解析，還是小程序的呈現(xiàn)，都沒有什么難度了...
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JS實(shí)現(xiàn)密碼箱小程序再也不用記各種密碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 Flex布局詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 Windows2008 R2服務(wù)器配置TLS1.2方法
微信小程序免費(fèi)SSL證書https、TLS版本問題的解決方案《二十四》request:fail錯(cuò)誤（含https解決方案）（真機(jī)預(yù)覽問題把下面的代碼復(fù)制到PowerShell里運(yùn)行一下，然后重啟服務(wù)器。# Enables TLS 1.2 on ...,需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了2023年了該了解下WebComponent使用教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 同步請求授權(quán)的詳解的相關(guān)資料,在小程序首次打開的時(shí)候，我需要同時(shí)請求獲取多個(gè)權(quán)限，由用戶逐一授權(quán)，這樣的需求實(shí)現(xiàn)，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了ES6繼承和ES5繼承，以及兩個(gè)繼承之間的差別，文中運(yùn)用示例以及代碼講解的非常清晰，感興趣的小伙伴可以參考一下2021-08-08
微信小程序 wx.request(OBJECT)發(fā)起請求詳解
這篇文章主要介紹了微信小程序 wx.request(OBJECT)發(fā)起請求詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例
這篇文章主要為大家介紹了JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了從ES6開始弱化arguments的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解
這篇文章主要為答案及介紹了Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解，整理一下?Babel?插件開發(fā)時(shí)用得到的轉(zhuǎn)換操作相關(guān)的?API，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08