js动态渲染html页面,利用Scrapy-Splash抓取JS动态渲染的网页数据

随着越来越多的网站开始用JS在客户端浏览器动态渲染网站，导致很多我们需要的数据并不能由原始的html中获取，再加上Scrapy本身并不提供JS渲染解析的功能，通常对这类网站数据的爬取我们一般采用两种方法：

通过分析网站，找到对应数据的接口，模拟接口去获取我们需要的数据(参见Scrapy抓取Ajax动态页面),但是一旦该网站的接口隐藏的很深，或者接口的加密过于复杂，此种方法可能就有点行不通了

借助JS内核，将获取到的含有JS脚本的页面交由JS内核去渲染，最后将渲染后生成的html返回给Scrapy分析，比较常见的WebKit和Scrapy-Splash

本篇文章的目的就是用来介绍如何使用Scrapy-Splash来配合Scrapy抓取动态页面这个问题。

准备工作

Docker安装,具体安装步骤参考Docker官网

为什么要安装Docker?

因为Scrapy-Splash使用了Splash HTTP API,所以你需要提供一个Splash实例，而在Docker镜像中已经有现成的Splash实例了，可以很方便的使用。

安装运行Splash

docker pull scrapinghub/splash #从docker镜像中拉取splash实例

docker run -p 8050:8050 scrapinghub/splash #启动splash实例

Scrapy配置

在Scrapy项目的setting.py中加入如下内容：

SPLASH_URL = 'http://localhost:8050'

DOWNLOADER_MIDDLEWARES = {

'scrapy_splash.SplashCookiesMiddleware': 723,

'scrapy_splash.SplashMiddleware': 725,

'scrapy.downloadermiddlewares.httpcompression.HttpCompressionMiddleware': 810,

}

SPIDER_MIDDLEWARES = {

'scrapy_splash.SplashDeduplicateArgsMiddleware': 100,

}

DUPEFILTER_CLASS = 'scrapy_splash.SplashAwareDupeFilter'

HTTPCACHE_STORAGE = 'scrapy_splash.SplashAwareFSCacheStorage'

实际代码解析

我们以腾讯证券这个页面为例，腾讯的证券新闻列表是js动态渲染而成

我们直接打开这个链接，然后打开开发者工具，定位到新闻列表处:

我们在从network中查看第一次请求的Response时发现，返回的html中该列表页处是空的

实际的数据被藏着JS里，加载完成后由JS操作DOM插入完成

此处由于实际数据被塞到了一段JS的变量里面，并不是由Ajax调用接口获取的，因此为了避免自己手动去截取js变量，我们便将该页面交给Scrapy-Splash渲染

import scrapy

from FinancialInfoSpider.items import ArticleItem

from scrapy_splash import SplashRequest

from w3lib.html import remove_tags

import re

from bs4 import BeautifulSoup

class TencentStockSpider(scrapy.Spider):

name = "TencentStock"

def start_requests(self):

urls = [

'http://stock.qq.com/l/stock/ywq/list20150423143546.htm',

]

for url in urls:

yield SplashRequest(url, self.parse, args={'wait': 0.5})

def parse(self,response):

sel = scrapy.Selector(response)

links = sel.xpath("//div[@class='qq_main']//ul[@class='listInfo']//li//div[@class='info']//h3//a/@href").extract()

requests = []

for link in links:

request = scrapy.Request(link, callback =self.parse_article)

requests.append(request)

return requests

def parse_article(self,response):

sel = scrapy.Selector(response)

article = ArticleItem()

article['title'] = sel.xpath('//*[@id="Main-Article-QQ"]/div/div[1]/div[1]/div[1]/h1/text()').extract()[0]

article['source'] = sel.xpath('//*[@id="Main-Article-QQ"]/div/div[1]/div[1]/div[1]/div/div[1]/span[2]').xpath('string(.)').extract()[0]

article['pub_time'] = sel.xpath('//*[@id="Main-Article-QQ"]/div/div[1]/div[1]/div[1]/div/div[1]/span[3]/text()').extract()[0]

html_content = sel.xpath('//*[@id="Cnt-Main-Article-QQ"]').extract()[0]

article['content'] = self.remove_html_tags(html_content)

return article

def remove_html_tags(self,html):

soup = BeautifulSoup(html)

[s.extract() for s in soup('script')]

[s.extract() for s in soup('style')]

content = ''

for substring in soup.stripped_strings:

content = content + substring

return content

主要代码就一句，将获取到的页面发送给本地的Splash实例去渲染解析，最后将结果返回给parse函数解析

SplashRequest(url, self.parse, args={'wait': 0.5})

里面用了BeautifulSoup这个库去除了html中得script和style标签，具体用法可以参考这两篇文章:

输出结果: