Anvil으로 인보이스 PDF 생성

인보이스는 모든 비즈니스를 운영하는 데 필수적인 부분이지만 프로그래밍 방식으로 인보이스 PDF를 만드는 데 번거로울 수 있습니다. 헤드리스 크롬을 실행하는 것은 고통스럽고 사용자의 브라우저에 의존하는 것은 신뢰할 수 없으며 여러 라이브러리를 함께 결합하는 것은 시간이 많이 걸리고 부서지기 쉽습니다.

이러한 어려움을 완화하기 위해 PDF 생성 API 끝점을 만들었습니다. 간단한 JSON 페이로드에서 새 PDF를 만들 수 있습니다.

이 가이드는 PDF 생성 API 끝점을 사용하여 PDF 송장을 만드는 방법을 안내합니다.

개요

우리의 목표는 다음과 같은 예시 송장을 생성하는 것입니다.



JSON 페이로드를 단계별로 생성한 다음 단일 REST 엔드포인트에 대한 POST 요청을 생성합니다: https://app.useanvil.com/api/v1/generate-pdf .

이 튜토리얼에서는 Anvil PDF 생성 끝점에 빠르게 익숙해지는 데 도움이 되는 다음 개념을 다룹니다.

데이터 페이로드를 빌드하여 동적 PDF 생성

로고로 PDF 사용자 정의

PDF에 가변 길이 표 추가

API 키 받기

먼저 Anvil 계정에 대한 API 키를 signing up까지 가져와야 합니다.

로그인하면 조직의 API 설정 페이지에서 API 키를 복사하라는 메시지가 표시됩니다. 자세한 내용은 getting started guide 을 참조하십시오.

1단계: 데이터 페이로드 구축

PDF의 본문은 JSON 개체의 배열로 지정됩니다. 최종 생성된 PDF에서 배열의 각 개체는 자체 섹션으로 렌더링되며 작은 여백으로 다른 섹션과 시각적으로 구분됩니다.

각 객체는 표시하려는 정보에 따라 label , content , heading 및/또는 table 키를 가질 수 있습니다.

const data = [{
  "content": "January 30th, 2024",
}, {
  "label": "To",
  "content": "Sally Jones - [email protected]",
}, {
  "label": "From",
  "content": "Acme Co. - [email protected]\n123 Main Street\nSan Francisco CA, 94103",
}, {
  "table": {
    // Bold the first row of the table
    "firstRowHeaders": true,
    // We"ll left align the left column, then right align the others
    "columnOptions": [{}, { "align": "right" }, { "align": "right" }],
    // Here we render our product information
    "rows": [
      ["Description", "Quantity", "Price"],
      ["4x Large wigets in green", "4", "$40.00"],
      ["10x Medium widgets in dark blue", "10", "$100.00"],
      ["6x Small widgets in white", "6", "$60.00"],
      ["", "", " "],
      ["", "**Tax**", "$16.23"],
      ["", "**Total**", "$216.23"],
    ],
  },
}]

2단계: 제목 및 로고 추가

다음으로 PDF 제목을 설정하고 로고를 포함해야 합니다. JSON 페이로드의 루트에 title 및 logo 속성을 설정한 다음 이전 섹션에서 생성한 데이터를 데이터 키에 포함합니다.

const generatePayload = {
  // The title at the top of the PDF
  "title": "Acme Co. Invoice - #123",

  // Your logo is displayed in the top right
  "logo": {
    // The URL can be any public image url or a data URI
    "src": "https://yoursite.com/yourlogo.png",
    "maxWidth": 50,
  },

  // The data payload from the last section
  "data": data
}

3단계: PDF 만들기

마지막으로 PDF를 생성할 차례입니다. https://app.useanvil.com/api/v1/generate-pdf REST 끝점을 사용하고 마지막 2개 섹션에서 조립한 전체 JSON 페이로드를 POST합니다. POST 요청의 응답은 완전히 새로운 송장 PDF 파일이 될 것입니다!

다음은 Anvil 노드 라이브러리, Postman 및 curl을 사용한 생성 요청의 예입니다.

옵션 1. node-anvil 라이브러리로 PDF 생성:

import fs from 'fs'
import Anvil from '@anvilco/anvil'
const apiKey = 'YOUR API KEY'
const anvilClient = new Anvil({ apiKey })
const generatePayload = { ... } // Specified above!
const {
  statusCode,
  data
} = await anvilClient.generatePDF(generatePayload)
console.log(statusCode) // => 200

// `data` will be the PDF raw bytes.
fs.writeFileSync('output.pdf', data, {
  // Saving as raw bytes is important!
  encoding: null
})

옵션 2. 당사Postman collection에는 이 송장을 생성하는 데 사용할 수 있는 PDF 생성 예제가 있습니다. 본문에 generatePayload를 붙여넣기만 하면 됩니다.



옵션 3. curl로 인보이스 PDF 생성:

curl \
  -X POST \
  -u YOUR_API_KEY: \
  -H 'Content-Type: application/json' \
  -d '{ "title": "Acme Co. Invoice - #123", "data": [ ... ] }' \
  https://app.useanvil.com/api/v1/generate-pdf > invoice.pdf

그게 다야!

요약

이제 동적 PDF를 생성하는 데 필요한 개념을 이해했습니다. 가장 중요한 부분은 시스템의 데이터로 페이로드를 구성한 다음 Anvil의 PDF 생성 엔드포인트에 단일 요청을 하는 것입니다.

이것은 헤드리스 크롬을 사용하거나 사용자의 브라우저에 의존하거나 자체 PDF 코드 라이브러리를 관리하는 것보다 애플리케이션에서 PDF를 생성하는 더 안정적이고 확장 가능하며 일관된 방법입니다. Anvil은 PDF를 쉽게 만들기 위해 여기에 있으므로 응용 프로그램 구축에 집중할 수 있습니다.

추가 리소스

PDF generation API docs 보기

Anvil API Postman collection을 확인하세요

방법 알아보기encrypt data PDF 생성 끝점

으로 전송

문제가있다? [email protected]으로 문의하십시오.