Внешний интерфейс использует сканер puppeteer для создания PDF-файла «React.js Book» и его слияния.

внешний интерфейс рептилия React.js Puppeteer

1,puppeteerчто это такое?

puppeteer: GoogleОфициально произведеноheadless Chrome nodeбиблиотека
puppeteer githubсклад
puppeteer API

Официальное введение:

Большинство вещей, которые вы можете сделать вручную в браузере, можно сделать с помощьюPuppeteerЗаканчивать!

Сделать скриншот страницы иPDF.

схватитьSPAи генерировать предварительно обработанный контент (т.е. "SSR»).
автоматическая отправка форм,UIТестирование, ввод с клавиатуры и т.д.
Создайте современную автоматизированную тестовую среду. использовать последнююJavaScriptи функциональность браузера непосредственно в последней версииChromeЗапустите тесты.
Захватите временную шкалу, отслеживайте свой веб-сайт, чтобы помочь диагностировать проблемы с производительностью.
тестовое заданиеChromeрасширение.

2. Сканирование веб-сайта для генерацииPDF

2.1 Установить кукловод

// 安装 puppeteer
// 可能会因为网络原因安装失败，可使用淘宝镜像 
// npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i puppeteer
# or "yarn add puppeteer"

2,2 "React.jsЗнакомство с «Маленькой книгой».

"React.jsмаленькая книгаВведение

Об авторе @moustache
Это небольшая книга о React.js. Потому что я использовал его на работеReact.js, и я всегда хотел подвести итог своей собственнойReact.jsнекоторые из знания, опыт. Поэтому я медленно разбирал некоторые идеи и записывал их в книгу.С открытым исходным кодом, бесплатно, профессионально, простоБуклет начального уровня предоставляется сообществу. Надеюсь помочь большеReact.jsТолько что вошел мой друг.
На картинке ниже "React.jsНесколько скриншотов маленькой книги:《React.js 小书》部分截图

2.3 Некоторые из них могут быть использованыpuppeteer API 

// 新建 reactMiniBook.js, 运行 node reactMiniBook.js 生成pdf
const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器
  const browser = await puppeteer.launch({
        // 无界面 默认为true,改成false,则可以看到浏览器操作，目前生成pdf只支持无界面的操作。
        // headless: false,
        // 开启开发者调试模式，默认false, 也就是平时F12打开的面版
		// devtools: true,
  });
  // 打开一个标签页
  const page = await browser.newPage();
  // 跳转到页面 http://huziketang.mangojuice.top/books/react/
  await page.goto('http://huziketang.com/books/react/', {waitUntil: 'networkidle2'});
  // path 路径， format 生成pdf页面格式
  await page.pdf({path: 'react.pdf', format: 'A4'});
  // 关闭浏览器
  await browser.close();
})();

Узнав, что это запускает браузер для открытия страницы и закрытия основного процесса браузера, давайте рассмотрим еще несколькоAPI.

const args = 1;
let wh = await page.evaluate((args) => {
    // args 可以这样传递给这个函数。
    // 类似于 setTimeout(() => {console.log(args);}, 3000, args);
    console.log('args', args); // 1
    // 这里可以运行 dom操作等js
    // 返回通过dom操作等获取到的数据
    return {
        width: 1920,
        height: document.body.clientHeight,
    };
}, args);
// 设置视图大小
await page.setViewport(wh);
// 等待2s
await page.waitFor(2000);

// 以iPhone X执行。
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone X'];
await page.emulate(iPhone);

2.4 Зная вышеизложенноеAPIПосле этого можно приступать к написанию основной программы.

Кратко: реализовать функцию и основной процесс. сверхуReact.js小书Сделайте снимок экрана.
1. Откройте браузер, войдите на страницу каталога, сгенерируйте0. React 小书 目录.pdf
2. Перейти к1. React.js 简介страница, получить всю навигацию слеваaсвязанныйhref,заглавие.
3. Используйте полученныйa链接数组провестиforЭтот цикл в основном выполняет следующие действия:

3.1 Скрыть левую навигацию для удобства генерацииpdf
3.2 Дать**React.js简介** Добавьте название номера и т. Д., Для удобства просмотра
3.3 Настройкиdocment.titleДобавьте порядковый номер для удобства использования в заголовках.
3.4 СкрытьЭто также хороший выбор для распространения знанийЭтот модуль (поскольку ссылка на книгу и прочая информация задаются в шапке и футере, он скрыт)
3.5 Добавьте серийные номера в предыдущий раздел и следующий раздел для нумерации страниц для удобства просмотра.
3.6 В конце объявитьpdfОписание предназначено только для обучения и общения и строго запрещено для коммерческого использования.
3.7 Верните ширину и высоту, чтобы установить размер представления
3.8 Установить размер представления, создать генерациюpdf

4. Закройте браузер

Конкретный код: можно посмотреть здесьСканер генерирует «Маленькую книгу React.js».pdfкод для каждого раздела

// node 执行这个文件
// 笔者这里是：
node src/puppeteer/reactMiniBook.js

Можно получить следующий рисунок: каждый подраздел (раздел 0-46)pdf

每一小节（0-46小节）的pdf

После их генерации потом приходит проблема, то есть не всегда можно посмотреть раздел при просмотре, а открыть раздел посмотреть, что очень неудобно.
Итак, следующий шаг — объединить этиpdfстатьpdfдокумент.

3. Объединить в один файл PDFpdf-merge

Сначала я пользовался онлайн-сайтомSmallpdf, объединитьPDF. Комбинированный эффект по-прежнему очень хорош. У этого сайта другие функции. НапримерwordПеременаpdfЖдать.
Позже нашел один, предоставленный сообществомnpm packagepdf merge. (Ведь автор пишет программы, поэтому я использую код для реализации слияния)

этоpdf-mergeполагатьсяpdftk

Установить PDFtk
Windows
Загрузить и установить
После установки перезагрузите компьютер, чтобы использовать его.

Дебиан, установка Убунту
Автор может использовать его после установки системы Ubuntu.
apt-get install pdftk

Пример использования

const PDFMerge = require('pdf-merge');

const files = [
	`${__dirname}/1.pdf`,
	`${__dirname}/2.pdf`,
];

// Buffer (Default)
PDFMerge(files)
.then((buffer) => {...});

// Stream
PDFMerge(files, {output: 'Stream'})
.then((stream) => {...});

// 笔者这里使用的是这个
// Save as new file
PDFMerge(files, {output: `${__dirname}/3.pdf`})
.then((buffer) => {...});

Зная это, можно приступать к написанию основной программы.
Кратко опишите основной процесс
1. Читать все сгенерированныеpdfпуть к файлу, отсортированный (0-46)
2. Определите, существует ли выходная папка, и создайте ее, если она не существует.
3. Объедините эти подразделыpdfсохранить в новый файлReact小书（完整版）-作者：胡子大哈-时间戳.pdf

Конкретный код: можно посмотреть здесьСканер генерирует «Маленькую книгу React.js».pdfсливатьсяpdfкод

Окончательный объединенный pdf-файл доступен для скачивания. ссылка на скачивание с гитхаба:React Little Book (Полная версия) - Автор: Beard Daha.

При этом мышление также можно добавить закладки, а номер страницы, не находить подходящую схему генерации, которые сначала не добавляются. Если у читателей есть хорошая программа, и я приветствую обмен.

резюме

1,puppeteerдаGoogleОфициально произведеноheadless Chrome nodeБиблиотеки, большинство вещей, которые можно сделать вручную в браузере, можно использоватьPuppeteerЗаканчивать. В общем, с его помощью можно сделать много интересного.
2. Используйтеpuppeteerгенерировать каждый разделpdf, с зависимостямиpdftkизpdf-merge npmпакет, объединенный в новыйpdfдокумент. или использоватьSmallpdfПодождите, пока сайт объединится.
3."React.jsмаленькая книга, всем рекомендую. гусеничное поколениеpdf, не должно быть правильнымАвтор @ Борода ДахаКаково влияние. Автору нелегко написать книгу, которая будет служить сообществу, поэтому поддержите автора как можно больше.

Наконец, порекомендуйте несколько ссылок для всех, чтобы узнатьpuppeteer.
Начало работы с кукловодом
Первый взгляд Puppeteer на автоматизированное тестирование переднего плана
Введение в стандарт ES6 генерации сканеров pdf
Большой интерфейсный артефакт Кукловод Amway
Puppeteer API китайская документация

о

Автор: Чанг ИВакагаваНазвание смешано в реках и озерах. По дороге на фронт | Энтузиасты РРТ | Знаю очень мало, только хорошо учусь.
личный блог
segmentfaultПередняя колонка обзора, открылПередний планКолонка, добро пожаловать на внимание ~
Колонка самородков, добро пожаловать, обратите внимание~
Знать столбец передней стороны, открылПередний планКолонка, добро пожаловать на внимание ~
github blog, спроситьstar^_^~

Публичный аккаунт WeChat Ruochuan Vision

Добро пожаловать в [Wakagawa Vision]. Вы также можете добавить WeChatruochuan12, укажите источник и втяните вас в [Front-end Vision Exchange Group].

Категории