إنشاء ملفات PDF عبر Free JavaScript API

الشروع في العمل مع PDFMake

PDFMake متاح في npm ، يمكنك تنزيله بسهولة وتثبيته على جهازك. الرجاء استخدام الأمر التالي للتثبيت السلس.

bower install pdfmake

قم بإنشاء ملفات PDF باستخدام مكتبة JavaScript

مكتبة جافا سكريبت مفتوحة المصدر PDFMake تجعل من السهل على مبرمجي البرامج إنشاء مستندات PDF داخل تطبيقاتهم الخاصة باستخدام كود JavaScript. أعطت المكتبة مجموعة كاملة من الميزات للعمل مع ملفات PDF ، مثل اختيار أنواع الخطوط مع الحجم واللون والتنسيق ، وإضافة صفحة جديدة ، وإدراج الأعمدة ، وإضافة الأنماط وتطبيقها ، وإدراج الجداول ، وحذف الصفحات غير المرغوب فيها ، والعديد من أكثر.

أضف الرؤوس والتذييلات إلى ملف PDF

تعتبر الرؤوس والتذييلات أجزاء مفيدة جدًا من مستندات PDF ويمكن استخدامها لتضمين ذلك الجزء من المحتوى الذي يريد المستخدمون ظهوره في كل صفحة من المستند مثل اسم المؤلف وعنوان المستند وأرقام الصفحات والشعار وغير ذلك الكثير. قدمت مكتبة جافا سكريبت PDFMake دعمًا كاملاً لإضافة وتعديل الرؤوس والتذييلات إلى مستند PDF. وهو يدعم ميزات مثل إضافة رأس / تذييل متكرر ، وإدراج الصور في رأس / تذييل ، وإضافة أرقام الصفحات ، وأكثر من ذلك بكثير.

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

إدراج الصور في ملفات PDF

قدمت مكتبة PDFMake الخاصة بمكتبة JavaScript مفتوحة المصدر دعمًا كاملاً لإضافة وتعديل الصور داخل ملفات 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