יצירת קבצי PDF באמצעות ממשק API של JavaScript בחינם

תחילת העבודה עם PDFMake

PDFMake זמין ב-npm, אתה יכול להוריד אותו בקלות ולהתקין אותו במחשב שלך. אנא השתמש בפקודה הבאה להתקנה חלקה.

bower install pdfmake

צור קבצי PDF באמצעות ספריית JavaScript

ספריית הקוד הפתוח JavaScript PDFMake מקלה על מתכנתי תוכנה ליצור מסמכי PDF בתוך האפליקציות שלהם באמצעות קוד JavaScript. הספרייה העניקה מערך שלם של תכונות לעבודה עם קבצי PDF, כגון בחירת סוגי גופנים עם גודל, צבע ועיצוב, הוספת עמוד חדש, הוספת עמודות, הוספה והחלה של סגנונות, הוספת טבלאות, מחיקת עמודים לא רצויים ועוד. יותר.

הוסף כותרות עליונות ותחתונות לקובץ PDF

כותרות עליונות ותחתונות הן חלקים שימושיים מאוד במסמכי PDF וניתן להשתמש בהם כדי לכלול את החלק הזה מהתוכן שמשתמשים רוצים שיופיע בכל עמוד של מסמך כמו שם מחבר, כותרת מסמך, מספרי עמודים, לוגו ועוד הרבה יותר. ספריית JavaScript PDFMake סיפקה תמיכה מלאה להוספה ושינוי של כותרות עליונות ותחתונות למסמך PDF. הוא תומך בתכונות כמו הוספת כותרת עליונה/תחתונה חוזרת, הוספת תמונות בכותרת עליונה/תחתונה, הוספת מספרי עמודים ועוד ועוד.

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

הוספת תמונות לקבצי PDF

ספריית JavaScript בקוד פתוח PDFMake סיפקה תמיכה מלאה להוספה ושינוי של תמונות בתוך קובצי PDF באמצעות פקודות JavaScript. הספרייה סיפקה תכונות להגדרת רוחב וגובה תמונה, התאמת תמונה בתוך מלבן, קריאה לתמונה באמצעות כתובות 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
		}
	}
}

הכנס טבלאות ל-PDF באמצעות JavaScript

ספריית הקוד הפתוח 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