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

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

1. 通过分析网站，找到对应数据的接口，模拟接口去获取我们需要的数据(参见Scrapy抓取Ajax动态页面),但是一旦该网站的接口隐藏的很深，或者接口的加密过于复杂，此种方法可能就有点行不通了
2. 借助JS内核，将获取到的含有JS脚本的页面交由JS内核去渲染，最后将渲染后生成的html返回给Scrapy分析，比较常见的WebKit和Scrapy-Splash

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

准备工作

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

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

2. Docker镜像源更改,参考国内 docker 仓库镜像对比

3. 安装运行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标签，具体用法可以参考这两篇文章:

Python爬虫利器二之Beautiful Soup的用法
使用BeautifulSoup删除html中的script、注释

输出结果: