導入

私のinvoicemakerアプリケーションのために、私は使用しましたPuppeteer PDFを生成するには私は非常にツールのシンプルさを楽しんで、いくつかのあなたはPuppeteerで行うことができます多くのことを紹介するには、私は少しアプリケーションを作ると思いました.

どのような人形を行うことができますか？

Github ReadMeによると、ここでは、Philpeteerがあなたを助けることができるもののいくつかがあります:

Puppeteerは簡単にウェブをscrapeにするツールです.これはChromeブラウザのヘッドレスインスタンスです.ウェブスクレーピングは、ウェブサイトを参照し、それからデータを抽出することを意味します.

何をビルドする

したがって、我々は少しコマンドラインアプリケーションを構築する予定です.この記事では、次の2つのことができます.

ユーザー名を指定して、そのユーザーの個人ページのスクリーンショットを生成します.

ユーザー名を与えられて、ユーザーが書いた、そして、PDFとしてそれを生成する最後の記事を取り戻してください.

セットアップ

そこで、CLIの削り落としと呼ばれるフォルダーを作りましょう.その中には、糸のinit (またはnpm initを実行しますが、ここで糸を使います).デフォルトを受け入れ、インデックスを作成します.jsファイル.それから、糸を走らせてください.最後に、CLIの削りの中に2つのフォルダを作成します:スクリーンショットのユーザーとPDFファイル.コーディングしましょう.

コマンドライン引数の取得

我々は、プロセスを使用します.argvで指定した引数を得る.少なくとも2つの要素で配列を返します.試してみましょう

console.log(process.argv)

走るときnode index.js , コンソールに入ります.

[ '/usr/local/Cellar/node/11.4.0/bin/node',
  '/Users/Damien/Desktop/javascript/scraping/index.js' ]

別の結果を得るが、2つの要素を取得します.最初のものは使用されるランタイムです(ここでノードv 11.4.0)、2番目はスクリプトのパスです.それで、私たちが与えるすべての議論はプロセスで始まります.argv [ 2 ]私が走るならばnode index.js blabla , プロセス.argv [ 2 ]は2になりますblabla . よろしいですか.ニースと簡単.それで、今私たちはどのように引数を取得するかを知っています.人形師に移りましょう.

スクリーンショットの生成

スクリーンショットを生成するには、次のコードを使用します.

(async () => {
    // Launching an instance of a headless Chrome browser
    const browser = await puppeteer.launch()

    // Create a new page
    const page = await browser.newPage()

    // Move to the specified url
    await page.goto('urlToThePage')

    // Take a screenshot and save it at the specified path
    await page.screenshot({ path: 'screenshot.png' })

    // Close the browser
    await browser.close()
}

ので、何をする必要がありますか?

この機能をラップする関数を作成します.

コマンドラインから

適切なデータ(ページURL、ユーザ名)

最初の引数は関数の名前、2番目はユーザ名です.したがって、コードは次のようになります.

const puppeteer = require('puppeteer')

const getScreenshot = async username => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto(`https://dev.to/${username}`)
    await page.screenshot({ path: `screenshots-users/${username}.png`, fullPage: true })
    await browser.close()
}

switch (process.argv[2]) {
    case 'getScreen':
        getScreenshot(process.argv[3])
        break
    default:
        console.log('Wrong argument!')
}

まず、私たちは人形職人をインポートします.それから、私たちはスクリーンショットを生成するのを気にするGetGetScreen機能を作成します.関数のスケルトンが以前に見られました.いくつかの変更点に注意してください.

ページ.後藤は適切なdevを取るユーザーの名前をURLに.

ページ.スクリーンショットは、ファイル名としてユーザー名を持つスクリーンショットのフォルダにPNGファイルを置きます.フルページに注意してください.

最後に、switch文があります.スクリーンショットを生成するために引数名としてgetscreenを使いました.
グレート、今私は走ることができるnode index.js getScreen damcosset 私のプロファイルのスクリーンショットを取得します.そして、スクリーンショットのユーザーのフォルダのスクリーンショットを見ることができます.PNG :
注:私はスペースを節約するためにスクリーンショットを切断していますが、スクリーン全体がスクリーンショットで利用可能です

さあ走りましょうnode index.js getScreen ben そして、ベンと呼ばれるフォルダの以下のスクリーンショットを得ます.PNG :

PDFの生成

これには3つの異なるステップがあります.
1 -ユーザーの個人ページに移動します
2 -彼女はそこに移動するために書いた最後の記事をクリックして
3 -私たちのPDFの名前が一意であることを確認する属性を取得します
4 - PDFを生成する
GetPDFという関数を作りましょう.内部のコードは次のようになります.

const getPDF = async username => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto(`https://dev.to/${username}`)

    await Promise.all([page.waitForNavigation(), page.click('.single-article')])
    const dataPath = await page.evaluate(() =>
        document.querySelector('.article').getAttribute('data-path')
    )
    await page.pdf({ path: `pdfs/${dataPath.split('/')[2]}.pdf` })

    await browser.close()
}

最初の3行は常に同じ、開始、新しいページ、gotoです.それでは約束がある.すべて.ここで2つのアクションを待っています.

記事カードをクリックします.

それから、その記事が生きるページは、ロードする必要があります

我々は、ここのページのHTML内容を調査する必要があります.devのツールでは、ユーザーの個人ページの各記事にはシングル記事というクラスがあります.それで、これは我々が目標とするものです.そのために、ページを使用します.をクリックして選択します.
これはそのセレクタで最初の要素を対象とします.そして、dev . toがあなたの新しい記事を最初に提示するので、これはまさに私が探していたものです.
次に、HTML構造を勉強したとき、各記事が記事のクラスでDIVに含まれているのを見ました.この要素はデータパス属性を持ちます.ページを使用します.評価すると、このノードを取得してこの属性を取得できます.これは、我々のPDFを保存するとき、衝突が全くないと保証します.
最後にページを呼びます.PDFとオプションのパスを渡します.検索したデータパスは、/username/title-article-000 それで、私はちょうど最後の部分を得るためにそれを分けました.
最後に、switch文にケースを追加することを忘れないでください.

switch (process.argv[2]) {
    case 'getScreen':
        getScreenshot(process.argv[3])
        break
    case 'getPDF':
        getPDF(process.argv[3])
        break
    default:
        console.log('Wrong argument!')
}

完了!さて、次のコマンドを実行できます.node index.js getPDF damcosset node index.js getPDF ben node index.js getPDF jessしたがって、これはヘッドレスクロムブラウザのインスタンスを作成し、私のページに移動し、私が書いた最後の記事をクリックし、そのページに移動し、そのページのコンテンツをPDFを作成します.閉じるこの動画はお気に入りから削除されています.
それで、今私はPDFSフォルダに3つのPDFを持っています.

start-before-you-are-ready-393e.pdf (Mine)

what-advice-would-you-give-someone-looking-to-use-their-keyboard-more-and-their-mouse-less-1lea.pdf (Ben)

what-was-your-win-this-week-3a9k.pdf (Jess)

タナヤサウナ!
コードが見つかるhere .

結論

ので、これは最初の部分のためです.操り人形は、このような楽しいツールを再生すると、私は戻って戻ってくることを確認します驚くべきことを私たちはそれを行うことができます.
楽しんでください