小程式開發之解析網頁內容

微信小程式 解析網頁內容詳解

#最近在寫一個爬蟲，需要將網頁解析供微信小程式使用。文字和圖片解析都好說，小程式也有對應的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程式碼到本機圖片的轉換，後續可以上傳到七牛雲等。不管是服務端的解析，還是小程式的呈現，都沒有什麼難度了...

以上是小程式開發之解析網頁內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！