Node.js 및 Puppeteer로 PDF 만들기

나는 특히 밴드에서 음악을 연주하는 것을 좋아합니다. 여러 사람의 목소리와 악기가 조화를 이루는 시너지에는 놀라운 것이 있습니다. 그러나 밴드가 성공하려면 모든 사람이 같은 입장에 있어야 합니다. 그렇지 않으면 엉망으로 들립니다.

생각해보면, 나는 밴드에서 함께 잘 연주하는 사람들 그룹과 생산적이고 고성능인 소프트웨어 팀 사이에 많은 비교를 할 수 있었습니다. 하지만, 나는 빗나간다. 아마 다른 시간!

밴드가 같은 페이지에 있는 한 가지 방법은 악보나 코드 차트를 따르는 것입니다.

최근에 Node.js를 사용하여 ChordPro 형식의 텍스트 파일을 PDF 코드 차트로 변환하는 개인 프로젝트Charter를 업데이트했습니다. 정말 재미있었어요!

지금, 당신은 생각하고 있을지도 모릅니다.

"I'm not a musician or singer. Why do I care?"

코드 차트에 대한 개인적인 필요에 관계없이 이 프로젝트의 소스 코드가 유용할 수 있습니다. 다음은 배울 수 있는 몇 가지 사항입니다.

Node.js 및 Yargs를 사용하여 CLI 앱 생성

텍스트 파일 로드 및 텍스트 구문 분석

Jest를 사용하여 Node.js 코드 테스트

핸들바를 사용하여 텍스트를 HTML로 변환

Puppeteer를 사용하여 HTML을 PDF로 변환

PDF 렌더링과 관련하여 wkhtmltopdf , electron-pdf , phantomjs , automating Chrome 명령줄 스위치를 포함한 많은 솔루션을 시도하고 마지막으로 Puppeteer 의 최신 버전을 사용하게 되었습니다. Puppeteer는 PDF 생성을 위해 ton of options을 지원합니다. 여기에는 멋진 일을 많이 할 수 있는 미개척 잠재력이 많이 있습니다!

Node.js를 사용하여 모든 웹 페이지를 PDF로 저장

Node.js이 이미 설치되어 있다고 가정하고 터미널 또는 명령줄을 열고 새 프로젝트 폴더를 만들고 초기화합니다.

mkdir pdf-test
cd pdf-test
npm init -y

다음으로 Puppeteer를 종속성으로 설치합니다.

npm install puppeteer

다음은 Puppeteer를 사용하여 Google 홈페이지를 PDF로 변환하는 방법의 예입니다. index.js라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

"use strict";

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://google.com");
  await page.pdf({ path: "./google.pdf", format: "Letter" });
  await browser.close();
})();

다음 명령을 사용하여 애플리케이션을 실행합니다.

node .

dev.to 홈 페이지와 같은 다른 것으로 URL을 변경할 수 있습니다. 일부 페이지는 JavaScript를 사용하여 동적으로 로드되므로 추가 옵션을 설정하지 않으면 결과 PDF가 불완전하게 나타날 수 있습니다.

로컬 HTML 파일을 PDF로 변환

Puppeteer는 웹 페이지 로딩에 국한되지 않습니다. 로컬 HTML 파일을 로드할 수도 있습니다. 이것이 Charter 애플리케이션이 코드 차트를 생성하는 방법입니다. Charter 앱은 먼저 ChordPro 텍스트 파일을 구문 분석하고 HTML 파일을 생성한 다음 Puppeteer를 사용하여 HTML을 렌더링하고 PDF로 저장합니다.
sample.html라는 새 파일을 만들고 다음 HTML을 붙여넣습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    * html,
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Yay! My own PDF generator!</p>
</body>
</html>

local.js라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

"use strict";

const path = require("path");
const puppeteer = require("puppeteer");

(async () => {
  const htmlFile = path.resolve("./sample.html");
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("file://" + htmlFile);
  await page.pdf({ path: "./sample.pdf", format: "Letter" });
  await browser.close();
})();

다음으로 명령줄에서 코드를 실행합니다.

node local.js

이제 자신만의 "Hello World!"가 있어야 합니다. 프로젝트 폴더의 PDF!

Charter로 화음 차트 만들기

Node.js 12.x 이상이 설치되어 있고 CLI 앱을 실행하려면 npx를 사용하여 애플리케이션을 직접 실행할 수 있습니다. 물론 테스트하려면 ChordPro 텍스트 파일이 필요합니다. 여기에 예가 있습니다. 또는 인터넷에서 다른 사람을 찾을 수 있습니다.

{title: Amazing Grace}
{artist: Words by: John Newton, John P. Rees}
{artist: Music by: William W. Walker, Edwin Othello Excell}
{key: G}  
{tempo: 90}
{time: 3/4 }

{comment: Verse 1}
A - [G]mazing [G/D]grace  [D7]how  [Em]sweet [C]the   [G]sound
That [G]saved a [G/D]wretch  [D/C]like    [G/B]me
I [G]once was [G/B]lost but [C]now am  [G]found
[G/B]Was   [Em]blind but [G/D]now    [D7]I    [G]see

npx Chromium을 사용하는 Puppeteer로 인해 처음 다운로드하는 데 약간의 시간이 걸립니다.

npx chord-charter -f amazing-grace.chordpro

프로젝트가 유용하기를 바랍니다! 나가서 굉장해!

Reference

이 문제에 관하여(Node.js 및 Puppeteer로 PDF 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/reverentgeek/convert-text-html-to-pdf-with-node-js-and-puppeteer-4c53

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Node.js 및 Puppeteer로 PDF 만들기

Node.js를 사용하여 모든 웹 페이지를 PDF로 저장

로컬 HTML 파일을 PDF로 변환

Charter로 화음 차트 만들기

Reference

좋은 웹페이지 즐겨찾기