Question

我已经成功地使我的Puppeteer脚本与Highcharts一起使用，但是仅当我转到具有highcharts库脚本的页面时包括在内。我试图弄清楚如何消除html页面 Puppeteer脚本的要求。以下highcharts3.html可以工作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highcharts Test 3</title>
</head>
<body>
<script src="/lib/highcharts/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

这是脚本highcharts3.js

const puppeteer = require('puppeteer')
const fs = require('fs')

console.log('main fs W_OK=' + fs.W_OK)

async function run() {

    console.log('run fs W_OK=' + fs.W_OK)

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts3.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {

        console.log('loadChart fs W_OK=' + fs.W_OK)

        await page.evaluate(async (fs) => {

            console.log('page.evaluate fs W_OK=' + fs.W_OK)
            console.log('Highcharts.version='
                + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()

现在，我想修改上面的内容以放入highcharts.js文件，而不是通过包含在html页面中的脚本，但通过某种方式在操纵up中脚本本身。这是我的尝试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highcharts Test 4</title>
</head>
<body>
<!-- Let's try to do this in the script -->
<!--<script src="/lib/highcharts/highcharts.js"></script>-->
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

const puppeteer = require('puppeteer')
const fs = require('fs')
const Highcharts = require('highcharts')

console.log('main fs W_OK=' + fs.W_OK)
console.log('main Highcharts.version=' +
    Highcharts().version)      //Works

async function run() {

    console.log('run fs W_OK=' + fs.W_OK)
    console.log('run Highcharts.version=' + Highcharts().version)   //Works

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true
    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts4.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {

        console.log('loadChart fs W_OK=' + fs.W_OK)
        console.log('loadChart Highcharts.version=' +
            Highcharts().version) //Works

        await page.evaluate(async (Highcharts, fs) => {

            //fs is defined because we passed it to page.evaluate
            console.log('page.evaluate fs W_OK=' + fs.W_OK)

            //The following statement fails with:
            //(node:3580) UnhandledPromiseRejectionWarning:
            // Error: Evaluation failed:
            // TypeError: Highcharts is not a function
            console.log('page.evaluate Highcharts.version=' +
                Highcharts().version)

            //When uncommented in place of the above, fails with:
            //Highcharts is undefined
            //console.log('page.evaluate Highcharts.version='
            // + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        }, Highcharts, fs)
    }

    await loadChart()
    await browser.close()
}

run()

这在loadChart函数中失败。我不知道如何需要Highcharts，以便在页面范围内可以看到它。

Answer 1

我终于找到答案了，以防万一对其他人有帮助。钥匙使用fs.readFileSync在上下文中读取我的highcharts.js 页面的
。

const puppeteer = require('puppeteer')
const fs = require('fs')

async function run() {

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true
    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts4.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {
        //THIS DID THE TRICK!
        page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));

        await page.evaluate(async (fs) => {

            console.log('page.evaluate Highcharts.version='
            + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()

现在，这是消除.html页面的最终版本

/**
 * This file creates a highchart, 
 * no html page is required.  The html is crafted
 * within this script.
 */
const puppeteer = require('puppeteer')
const fs = require('fs')

async function run() {

    const browser = await puppeteer.launch({
        headless: true
    })
    // const browser = await puppeteer.launch({
    //     headless: false,
    //     slowMo: 2000,
    //     devtools: true
    // })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    const loaded = page.waitForNavigation({
        waitUntil: 'load'
    })

    const html =
        `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Highcharts Test 4</title>
        </head>
        <body>
        <div id="container" style="width:100%; height:400px;"></div>
        </body>
        </html>`

    await page.setContent(html)
    await loaded

    async function loadChart() {

        page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));

        await page.evaluate(async (fs) => {

            console.log('page.evaluate Highcharts.version='
                + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()

没有HTML页面的木偶？

1 个答案: