微信小程序 解析網(wǎng)頁(yè)內(nèi)容詳解及實(shí)例
微信小程序 解析網(wǎng)頁(yè)內(nèi)容詳解
最近在寫(xiě)一個(gè)爬蟲(chóng)，需要將網(wǎng)頁(yè)進(jìn)行解析供微信小程序使用。文字和圖片解析都好說(shuō)，小程序也有對(duì)應(yīng)的text和image標(biāo)簽可以呈現(xiàn)。而更復(fù)雜的，比如表格，則比較棘手，不管是服務(wù)端解析還是小程序呈現(xiàn)都很費(fèi)勁，也很難覆蓋所有情況。于是我想，將表格對(duì)應(yīng)的HTML代碼轉(zhuǎn)成圖片，不失為一種變通的方法。
這里我們采用node-webshot模塊，它對(duì)PhantomJS進(jìn)行了輕量封裝，可以輕松地將網(wǎng)頁(yè)以截圖形式保存下來(lái)。
首先安裝Node.js和PhantomJS，然后新建一個(gè)js文件，加載node-webshot模塊：
const webshot = require('webshot');
定義選項(xiàng)：
const options = {
// 瀏覽器窗口
screenSize: {
width: 755,
height: 25
},
// 要截圖的頁(yè)面文檔區(qū)域
shotSize: {
height: 'all'
},
// 網(wǎng)頁(yè)類(lèi)型
siteType: 'html'
};
這里，瀏覽器窗口的寬度要根據(jù)網(wǎng)頁(yè)情況合理設(shè)置，高度可以設(shè)置為一個(gè)很小的數(shù)值，然后頁(yè)面文檔區(qū)域的高度一定要設(shè)置為all，寬度默認(rèn)為窗口寬度，這樣就可以把表格以最小的尺寸完整截圖。
接下來(lái)，定義html字符串：
let html = "target rich text html code, eg: <table>...</table>";
注意，里面的HTML代碼一定要去掉換行符，并將雙引號(hào)替換為單引號(hào)。
最后，截圖：
webshot(html, 'demo.png', options, (err) => {
if (err)
console.log(`Webshot error: ${err.message}`);
});
這樣，就實(shí)現(xiàn)了從HTML代碼到本地圖片的轉(zhuǎn)換，后續(xù)可以上傳到七牛云等。不管是服務(wù)端的解析，還是小程序的呈現(xiàn)，都沒(méi)有什么難度了...
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- 微信小程序 for 循環(huán)詳解
- 微信小程序 實(shí)戰(zhàn)小程序?qū)嵗?/a>
- 微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用及實(shí)例詳解
- 微信小程序 參數(shù)傳遞詳解
- 微信小程序 數(shù)據(jù)訪問(wèn)實(shí)例詳解
- 微信小程序 WXML、WXSS 和JS介紹及詳解
- 微信小程序 實(shí)現(xiàn)列表刷新的實(shí)例詳解
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例
- 微信小程序 獲取微信OpenId詳解及實(shí)例代碼
- 微信小程序 wx:key詳細(xì)介紹
相關(guān)文章
微信小程序 新建登錄頁(yè)并實(shí)現(xiàn)tabBar隱藏
這篇文章主要介紹了微信小程序 新建登錄頁(yè)并實(shí)現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下2017-06-06
Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹
這篇文章主要介紹了微信小程序 基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02
uniapp封裝canvas組件無(wú)腦繪制保存小程序分享海報(bào)
這篇文章主要為大家介紹了uniapp封裝canvas組件和方法無(wú)腦繪制并保存小程序分享海報(bào)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Javascript常用數(shù)組是構(gòu)成其的一個(gè)重要的部分，它們可以用來(lái)存儲(chǔ)字符串、對(duì)象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用及實(shí)例詳解
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-09-09
Electron學(xué)習(xí)應(yīng)用程序打包實(shí)例詳解
這篇文章主要介紹了Electron學(xué)習(xí)應(yīng)用程序打包實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了從ES6開(kāi)始弱化arguments的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02