mouse_move: [{time: 106597, x: 215, y: 115}, {time: 106695, x: 181, y: 105}, {time: 106796, x: 134, y: 139},…]
page_visit_id: 14777325238
page_visit_key: "e9fa998e-5811-4d2f-81d2-bd296c7129af"

//选择目标观测节点
let target = document.querySelector('目标节点选择器');

// 创建观察者对象
var observer = new window.MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });    
});
 
// 观测项配置:
var config = { attributes: true, childList: true }
 
// 开始观测目标节点
observer.observe(target, config);

const puppeteer =require('puppeteer');

const render= async (options)=>{

    //创建浏览器实例
    const browser = await puppeteer.launch({
        args:['--no-sandbox']
    });
    //创建page对象
    const page = await browser.newPage();
    //设置page内容
    await page.setContent(`
    //省略部分代码
    <div id="container" style="width:600px;hight=400px"></div>
    ...
    `);

    //传递options对象到evaluate函数中，挂载到window对象的全局属性中
    await page.evaluate((options)={
        window.chart={
            options
        }
    },options);

    //这里以百度echarts为例说明 ，注入echarts库到页面
    await page.addScriptTag({
        url:'https://cdnxxx.echarts库'
    })

    //echarts 初始化脚本注入页面
    await page.addScriptTag({
        content:`
        (function (window) {
            let option =window.chart.options; //浏览器环境下获取window对象中chart的配置项进行初始化
            var myChart = window.echarts.init(document.getElementById('container'), null, {
                renderer: 'svg'
            });
            myChart.setOption(option);
        })(this);
        
        `
    });

    let $el = await page.$('#container');
    let buffer = await $el.screenshot({
        type: 'png',
        path:'xxx.png'
    });

    await page.close();
    await browser.close();

}

//使用方法
let options = {
    ...// echarts 各种配置
}

render(options);

const fs = require('fs');
const NodeCharts = require('node-charts');
let nc = new NodeCharts();

let option = {
    //第三方chart 配置项
}

//监听全局异常事件
nc.on('error',(err)=>{
    console.log(err);
});

nc.render(option,(err,data)=>{
    fs.writeFileSync('test.png',data);
},{
    type:'echarts' //所用的第三方库标识，内置highcharts 和echarts两种默认为echarts，可通过根目录创建node.config.js文件配置 外部chart
})

const puppeteer = require('puppeteer');
const URL = require('url');
const md5 = require('md5');
const fs = require('fs');
const util = require('util');
const path = require('path');
const shell = require('shelljs');

//资源保存目录
const BASEDIR = './asserts/';

const start = async () => {

    //初始化删除清理资源目录，仅测试阶段，因为当前目录为时间戳生成
    shell.exec('rm -rf asserts/');
    //因为所有网络请求都会拦截，处理请求和页面资源以及dom构建无关可忽略
    //下面的域名是比较常见的前端采集域名 (有很多没有列出来的)
    const blackList = [
        'collect.ptengine.cn', 
        'collect.ptengine.jp',
        'js.ptengine.cn',
        'js.ptengine.jp',
        'hm.baidu.com',
        'api.growingio.com',
        'www.google-analytics.com',
        'script.hotjar.com',
        'vars.hotjar.com'
    ];
    //用来缓存第三方资源（包括css、javascript），在请求没有结束之前，无法获取完整的第三方资源列，无法保证css、javascript中内容替换完整，所以先缓存，请求结束后再统一替换
    const resourceBufferMap = new Map();
    //第三方资源服务（域名）列表
    const thirdPartyList = {};
    try {
        const browser = await puppeteer.launch();

        const page = await browser.newPage();
        //启用请求拦截
        await page.setRequestInterception(true);
       //以博客园为例子进行页面抓取
        let url = "https://www.cnblogs.com"
        let docUrl = URL.parse(url);
        //获取请求地址的域名，用来确定资源是否来自第三方
        let originUrl = (docUrl.protocol + "//" + docUrl.hostname)
        //@fixme 每次抓取生成的内容目录名称
        let md5_prefix = md5(Date.now());

        page.on('request', async (req) => {
            const whitelist = ['image', 'script', 'stylesheet', 'document', 'font'];
            //如果请求的是第三方域名，只考虑和页面构建相关的资源
            if (req.url().indexOf(originUrl) == -1 && !whitelist.includes(req.resourceType())) {
                return req.abort();

            }
            //采集黑名单中的内容不处理
            if (blackList.indexOf(URL.parse(req.url()).host) != -1) {
                return req.abort();
            }
            req.continue();


        });

        page.on('response', async res => {
            let request = res.request(),
                resourceUrl = request.url(),
                urlObj = URL.parse(resourceUrl),
                filePath = urlObj.pathname, //文件路径
                dirPath = path.dirname(filePath), //目录路径
                requestMethod = request.method().toUpperCase(), //请求方法
                isSameOrigin = resourceUrl.includes(originUrl); //是否是同域名请求

            //只考虑get请求资源，其它http verb 对文件资源请求较少
            if (requestMethod === 'GET') {
                //如果是同一个域名下的资源，则直接构建目录，下载文件
                //创建路径的方式依据请求本身path结构，保证和原资源网站目录结构完整统一，这样即使有CMD、AMD规范的代码再次执行，require相对路径也不会出现问题。
                let dirPathCreatedIfNotExists,
                    filePathCreatedIfNotExists;

                let hostname = urlObj.hostname;

                if (isSameOrigin) {
                    //构建同域名path
                    //同域名的资源 有时会以//www.xxx.com/images/logo.png 这种方式使用，所以，对这种资源需要特殊处理
                    thirdPartyList[`//${hostname}`] = '';
                    dirPathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, dirPath);
                    filePathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, filePath);
                } else {
                    //第三方资源构建正则表达式，替换http、https、// 三种模式路径为本地目录路径
                    thirdPartyList[`(https?:)?//${hostname}`] = `/${hostname}`;
                    dirPathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, hostname, dirPath);
                    filePathCreatedIfNotExists = path.join(BASEDIR, md5_prefix, hostname, filePath);
                }
                //获取扩展名 如果获取不到 则认为不是资源文件
                if (path.extname(filePathCreatedIfNotExists)) {
                    //路径不存在，直接创建多级目录
                    if (!fs.existsSync(dirPathCreatedIfNotExists)) {
                        shell.exec(`mkdir -p ${dirPathCreatedIfNotExists}`);
                        console.log('create dir');
                    }
                    if (res.ok()) {
                        if ((isSameOrigin && dirPath != '/') || !isSameOrigin) {
                            let needReplace = ['stylesheet', 'script'];
                            //@fixme toString 可能会有编码问题
                            let fileContent = (await res.buffer()).toString();
                            //第三方域名还获取，先缓存再处理
                            if (needReplace.includes(request.resourceType())) {
                                //js css 文件中可能包含需要替换的内容，需要处理
                                //所以暂时缓存不写入文件
                                resourceBufferMap.set(filePathCreatedIfNotExists, fileContent);
                            } else {

                                fs.writeFileSync(filePathCreatedIfNotExists, await res.buffer());
                            }
                        }
                    }
                }

            }

        });

        await page.goto(url, {
            waitUntil: 'networkidle0'
        });

        let content = await page.content();

        //对css javascript文件 进行替换处理
        resourceBufferMap.forEach((value, key) => {
            value = applyReplace(value, thirdPartyList);
            fs.writeFileSync(key, value);
        })

        // html 内容处理
        content = applyReplace(content, thirdPartyList);

        fs.writeFileSync(`./asserts/${md5_prefix}/index.html`, content);

        await page.close();
        await browser.close();
    } catch (error) {
        console.log(error);
    }


}

function applyReplace(origin, regList) {
    for (let prop in regList) {
        //进行正则全局替换
        let reg = new RegExp(prop, 'g')
        origin = origin.replace(reg, regList[prop]);
    }
    return origin;
}


start();

//启用请求拦截
 this.page.setRequestInterception(true);
 //监听请求事件
this.page.on('request', (req) => {
    //如果包含在拒绝列表中的文件
    let denyFile = this._isInCtrllist(req.url(), ctrlsfiles);
    if (denyFile.getIsDenyFile()) {
        //直接响应本地文件内容
        req.respond({
            body: denyFile.getFileContent()
        });
    } else {
        //其它情况请求继续
        req.continue();
    }
})

const path = require('path');
const fs = require('mz/fs');
const puppeteer = require('puppeteer');


const pdfDir = path.resolve(__dirname, './pdf/');
const targetHost = "http://huziketang.mangojuice.top"


//保存pdf 文件
const savePdf = async (page, link) => {
    let fileName = link.substring(link.lastIndexOf('/')) + '.pdf';
    await page.goto(link);
    await page.evaluate(() => {
        //隐藏左侧菜单栏 以及下方部分内容
        let allNeedHidens = document.querySelectorAll('#table-of-content,.PageNavigation,.share-block,hr,blockquote,.post__back>a,#wrapper>h1');
        let elCount = allNeedHidens.length;
        for (let i = 0; i < elCount; i++) {
            allNeedHidens[i].style.display = 'none';
        }
    });
    await page.pdf({
        path: pdfDir + fileName
    });
    console.log(`${link} saved to pdf successfully!!!`);
}



//启动程序
const start = async () => {
    //创建一个browser 实例
    let browser = await puppeteer.launch({
        headless: true,
        devtools: false
    });

    //创建一个空白page实例
    let page = await browser.newPage();
    //设置禁用js,当前必须设置，否则会导致页面无法处理
    //说明：只是禁用page原有javascript,但是page.evaluate 中可以继续使用
    await page.setJavaScriptEnabled(false);

    //获取书目录标题
    await page.goto(targetHost + '/books/react/');

    let result = await page.evaluate((targetHost) => {
        //获取目录链接
        let ulArray = document.querySelectorAll('ul.table-of-content>li>a');
        let array = Array.prototype.slice.call(ulArray, 0);
        let links = array.map((v) => {
            let href = v.getAttribute('href');
            return `${targetHost}${href}`;
        })
        return {
            links: links
        }
    }, targetHost);

    for (let link of result.links) {

        await savePdf(page, link);

    }


    await page.close();
    await browser.close();


}

start();