Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Формирование PDF файла с помощью pdfmake (https://javascript.ru/forum/misc/74053-formirovanie-pdf-fajjla-s-pomoshhyu-pdfmake.html)

D-Nik Lubny 09.06.2018 09:25

Формирование PDF файла с помощью pdfmake
 
Здравствуйте, используя pdfmake пытаюсь сформировать Счет-Фактуру. Но возникла проблема с добавлением изображения в PDF-файл.
Есть код:
var docDefinition = {
    info: {
		title: "Счет-Фактура",
		author: "Мебель-Сервис",
		subject: "Счет-Фактура",
		keywords: ""
	},
	
pageSize:'A4',
pageOrientation:'landscape',
pageMargins:[50,50,30,60],

header:function(curentPage,pageCount) {
	return {
	text:curentPage.toString() + 'из' + pageCount,
	alignment:'right',
	margin:[0,30,10,50]
	}
},

footer:[
{
	text:'www.mebel-service.com.ua',
	alignment:'center' //left or right
}
],
content: [
{
		image: 'img/logo.jpg',
		fit: [100, 100],
		pageBreak: 'after'
	},
{
	text:'СЧЕТ-ФАКТУРА',
	fontsize:20,
	alignment:'center'
},
{
	columns:[
	{
		width:'auto',
		text:'Наименование товара'
	},
	{
		width:'auto',
		text:'Наименование товара 2'
	},
	],
	ColumnGap: 50
},
{table:{
	widths:['*','auto',150,'*'],
	
	body:[
	['Первая','Вторая','Третья','Четвертая'],
	['Первая','Вторая','Третья','Четвертая'],
	[{text:'текстовое содержимое',bold:true},'Вторая','Третья','Четвертая']
	],
	headerRows:1
}}
]
}
pdfMake.createPdf(docDefinition).download(name.pdf);

Но файл не формируется из-за ошибки
uncaught exception: invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

Если убрать код добавления изображения, то все нормально работает.
{
		image: 'img/logo.jpg',
		fit: [100, 100],
		pageBreak: 'after'
	},

Помогите пожалуйста добавить в файл логотип компании.

Nexus 09.06.2018 09:38

Попробуйте изображение в base64 перевести.
https://developer.mozilla.org/ru/doc...API/FileReader

D-Nik Lubny 09.06.2018 09:50

Увы не могу разобраться. На странице документации библиотеки приведены примеры, но я что-то не могу разобраться с ними.
Сайт: http://pdfmake.org/#/gettingstarted
Примеры вставки картинок
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'
    },
    {
      // under NodeJS (or in case you use virtual file system provided by pdfmake)
      // you can also pass file names here
      image: 'myImageDictionary/image1.jpg'
    }
  ],

  images: {
    mySuperImage: 'data:image/jpeg;base64,...content...'
  }
};

Nexus 09.06.2018 09:59

D-Nik Lubny, я вам ссылку во втором посте оставил, по ней перейдите и ознакомьтесь с контентом, что там расположен.

D-Nik Lubny 09.06.2018 11:06

Увы для меня это темный лес. Посмотрел, почитал. И примеры пересмотрел. Но так ничего и не понял.

Nexus 09.06.2018 11:15

D-Nik Lubny, там ничего сложного нет, но у меня сейчас времени недостаточно.
Как появится - помогу вам, если этого никто другой не сделает.

D-Nik Lubny 09.06.2018 11:24

Nexus,
Спасибо огромное. Я розобрался. Перекодировал в Base64 с помощь сервиса https://www.base64-image.de/ и вставил полученный код. Не знаю насколько это красиво и правильно, но работает.

D-Nik Lubny 09.06.2018 16:04

Все же нужна еще помощь.
Суть такова. Есть поля из которых данные должны быть переданы в файл PDF. Я написал для них следующий код

{table:{
	widths:[170,50,50,100,100,30,60,60,40],
	
	body:[
    [{ text: 'Наименование товара', bold: true, alignment:'center'},{ text: 'Размер', bold: true, alignment:'center'},{ text: 'Цвет', bold: true, alignment:'center'},{ text: 'Комплектация (с ящиками, без ящиков и т.д.)', bold: true, alignment:'center'},{ text: 'Дополнительная комплектация (с дополнительными бортиками и т.д.)', bold: true, alignment:'center'},{ text: 'К-тво (шт.)', bold: true, alignment:'center'},{ text: 'Доставка', bold: true, alignment:'center'},{ text: 'Упаковка', bold: true, alignment:'center'},{ text: 'Цена', bold: true, alignment:'center'}],
	[document.getElementById("ProductName").value,document.getElementById("ProductSize").value,document.getElementById("ProductColor").value,document.getElementById("ProductEquipment").value,document.getElementById("ProductAddEquipment").value,document.getElementById("ProductAmount").value,document.getElementById("ProductDelivery").value,document.getElementById("ProductPackaging").value,document.getElementById("ProductPrice").value],
	[document.getElementById("ProductName2").value,document.getElementById("ProductSize2").value,document.getElementById("ProductColor2").value,document.getElementById("ProductEquipment2").value,document.getElementById("ProductAddEquipment2").value,document.getElementById("ProductAmount2").value,document.getElementById("ProductDelivery2").value,document.getElementById("ProductPackaging2").value,document.getElementById("ProductPrice2").value],
	[document.getElementById("ProductName3").value,document.getElementById("ProductSize3").value,document.getElementById("ProductColor3").value,document.getElementById("ProductEquipment3").value,document.getElementById("ProductAddEquipment3").value,document.getElementById("ProductAmount3").value,document.getElementById("ProductDelivery3").value,document.getElementById("ProductPackaging3").value,document.getElementById("ProductPrice3").value],
	['','','','','','','','','']
	],
	headerRows:1
}},


На ПК код работает только после того как страницу перегрузить (без очистки ранее заполненных полей).
А на мобильных код не работает вообще (так как если перегрузить страницу, то все поля очищаются).

Помогите пожалуйста. Как перенести в PDF данные и полей.

D-Nik Lubny 09.06.2018 17:18

Все. Разобрался. Прошу прощения за то, что побеспокоил.


Часовой пояс GMT +3, время: 21:42.