무료 JavaScript API를 통한 PDF 파일 생성

PDFMake 시작하기

PDFMake는 npm에서 사용할 수 있습니다. 쉽게 다운로드하여 컴퓨터에 설치할 수 있습니다. 원활한 설치를 위해 다음 명령어를 사용해주세요.

bower install pdfmake

JavaScript 라이브러리를 사용하여 PDF 파일 생성

오픈 소스 JavaScript 라이브러리 PDFMake를 사용하면 소프트웨어 프로그래머가 JavaScript 코드를 사용하여 자체 응용 프로그램 내에서 PDF 문서를 쉽게 생성할 수 있습니다. 라이브러리는 크기, 색상 및 서식이 있는 글꼴 유형 선택, 새 페이지 추가, 열 삽입, 스타일 추가 및 적용, 표 삽입, 원하지 않는 페이지 삭제 등과 같은 PDF 파일 작업을 위한 완전한 기능 세트를 제공했습니다. 더.

PDF 파일에 머리글 및 바닥글 추가

머리글과 바닥글은 PDF 문서의 매우 유용한 부분이며 작성자 이름, 문서 제목, 페이지 번호, 로고 등과 같이 사용자가 문서의 모든 페이지에 표시하려는 콘텐츠 부분을 포함하는 데 사용할 수 있습니다. JavaScript 라이브러리 PDFMake는 PDF 문서에 머리글과 바닥글을 추가하고 수정하기 위한 완벽한 지원을 제공했습니다. 반복적인 머리글/바닥글 추가, 머리글/바닥글에 이미지 삽입, 페이지 번호 추가 등과 같은 기능을 지원합니다.

 var docDefinition = {
 header: 'simple text',
 footer: {
  columns: [
   'Left part',
   { text: 'Right part', alignment: 'right' }
  ]
 },
 content: (...)
};

PDF 파일에 이미지 삽입

오픈 소스 JavaScript 라이브러리 PDFMake는 JavaScript 명령을 사용하여 PDF 파일 내부에 이미지를 추가하고 수정하기 위한 완벽한 지원을 제공했습니다. 라이브러리는 이미지 너비와 높이 설정, 사각형 안에 이미지 맞추기, URL을 통해 이미지 호출, 비례적으로 이미지 크기 조정, 이미지 늘이기 등의 기능을 제공했습니다. 여러 노드에서 동일한 이미지를 사용하려면 이미지 사전에 넣고 이름만 불러주면 됩니다.

 var docDefinition = {
 content: [
  {
   // you'll most often use dataURI images on the browser side
   // if no width/height/fit is provided, the original size will be used
   image: 'data:image/jpeg;base64,...encodedContent...'
  },
  {
   // if you specify width, image will scale proportionally
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150
  },
  {
   // if you specify both width and height - image will be stretched
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150,
   height: 150
  },
  {
   // you can also fit the image inside a rectangle
   image: 'data:image/jpeg;base64,...encodedContent...',
   fit: [100, 100]
  },
  {
   // if you reuse the same image in multiple nodes,
   // you should put it to to images dictionary and reference it by name
   image: 'mySuperImage'
  },
  {
   image: 'myImageDictionary/image1.jpg'
  },
  {
   // in browser is supported loading images via url from reference by name in images
   image: 'snow'
  },
  {
   image: 'strawberries'
  },
 ],
 images: {
  mySuperImage: 'data:image/jpeg;base64,...content...',
  snow: 'https://picsum.photos/seed/picsum/200/300',
  strawberries: {
   url: 'https://picsum.photos/id/1080/367/267'
   headers: {
    myheader: '123',
    myotherheader: 'abc',
   }
  }
 }
};

페이지 방향 및 여백 지원

무료 JavaScript 라이브러리 PDFMake에는 JavaScript 앱 내부의 페이지 크기, 페이지 방향 및 페이지 여백 설정에 대한 지원이 포함되어 있습니다. 페이지 크기를 설정하려면 새 페이지의 너비와 높이를 제공해야 합니다. 기본적으로 라이브러리는 세로 페이지 방향을 사용하지만 한 줄짜리 코드로 가로 방향으로 쉽게 설정할 수 있습니다. 또한 페이지 여백 설정을 지원하고 사용자가 페이지 나누기를 동적으로 제어할 수 있습니다. 왼쪽, 위쪽, 오른쪽, 아래쪽 및 가로 및 세로 여백을 지원합니다.

 
var dd = {
	content: [
		{
			stack: [
				'This header has both top and bottom margins defined',
				{text: 'This is a subheader', style: 'subheader'},
			],
			style: 'header'
		},
		{
			text: [
				'Margins have slightly different behavior than other layout properties. They are not inherited, unlike anything else. They\'re applied only to those nodes which explicitly ',
				'set margin or style property.\n',
			]
		},
		{
			text: 'This paragraph (consisting of a single line) directly sets top and bottom margin to 20',
			margin: [0, 20],
		},
		{
			stack: [
				{text: [
						'This line begins a stack of paragraphs. The whole stack uses a ',
						{text: 'superMargin', italics: true},
						' style (with margin and fontSize properties).',
					]
				},
				{text: ['When you look at the', {text: ' document definition', italics: true}, ', you will notice that fontSize is inherited by all paragraphs inside the stack.']},
				'Margin however is only applied once (to the whole stack).'
			],
			style: 'superMargin'
		},
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			alignment: 'right',
			margin: [0, 190, 0, 80]
		},
		subheader: {
			fontSize: 14
		},
		superMargin: {
			margin: [20, 0, 40, 0],
			fontSize: 15
		}
	}
}

JavaScript를 통해 PDF에 표 삽입

오픈 소스 라이브러리 PDFMake를 사용하면 컴퓨터 프로그래머가 PDF 파일 내부에 테이블을 삽입하고 업데이트할 수 있습니다. 라이브러리는 테이블의 행 열과 셀을 처리하기 위한 다양한 고급 기능을 지원합니다. 여기에는 표 정렬, 표 테두리 스타일 지정, 너비(퍼센트) 정의, 표 회전, 새 페이지에서 표 머리글 행 정의 등을 지원합니다.

 var docDefinition = {
 content: [
  {
   layout: 'lightHorizontalLines', // optional
   table: {
    // headers are automatically repeated if the table spans over multiple pages
    // you can declare how many rows should be treated as headers
    headerRows: 1,
    widths: [ '*', 'auto', 100, '*' ],
    body: [
     [ 'First', 'Second', 'Third', 'The last one' ],
     [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
     [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
   }
  }
 ]
};
pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
// tableLayouts, fonts and vfs are all optional - falsy values will cause