Вставка фонового изображения в pdfmake

Я использую pdfmake http://bpampuch.github.io/pdfmake/index.html#/gettingstarted для преобразования html в pdf. Чтобы создать PDF, я использую некоторый жестко закодированный текст и некоторый текст, полученный с помощью AngularJS из файла .json. Все работает хорошо, за исключением фонового изображения.

Кто-нибудь делал это раньше? Использовали фоновое изображение с pdfmake? Я хотел бы получить несколько советов о том, как заставить его схватить его и фактически поставить в фоновом режиме. Спасибо.


javascript angularjs pdfmake
person Varvara Jones    schedule 08.04.2015    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Оказывается, чтобы установить изображение в качестве фона, нужно выбрать выходной размер .pdf, соответствующим образом изменить размер изображения bkg, а затем указать все размеры в функции следующим образом (я использую AngularJS с этим):

$scope.pdfMaker = function() {
var docDefinition = {
  pageSize: 'LETTER',
  background: [
   {
       image: 'data:image/jpeg;base64,/9j/4QAY...',
       width: 792
   }
 ],
 //other parameters go here
}

Указание pageSize и ширины изображения имело решающее значение для того, чтобы изображение появлялось в фоновом режиме.

Дайте мне знать, есть ли ошибки в этом методе или если кому-то удалось сделать это более простым способом.

person Varvara Jones    schedule 08.04.2015
comment
могу ли я передать прямой URL-адрес вместо base64? Мое изображение base64 не отображается в PDF, в чем может быть проблема? - person 151291; 27.02.2019
comment
Я думаю, что пробовал это раньше, и это не сработало. К сожалению, я не писал этот код, поэтому я не могу сказать вам, что будет работать, а что нет. Лучше всего попробовать и посмотреть. Если исходное изображение слишком большого размера, это будет проблемой. Сначала попробуйте что-нибудь маленькое. - person Varvara Jones; 05.03.2019

arrow_upward
5
arrow_downward

Это будет перекрывать ваш текст с вашим изображением (будет действовать как фоновое изображение). Это решение может работать и для нескольких изображений.

Пример кода:

var dd = {
    content: [
        {
            image: 'sampleImage.jpg',
            width: 200
        },
        {
            text: 'Text over image',
            absolutePosition: {x: 100, y: 50}
        }       
    ]
}
person iDevAmit    schedule 08.03.2018

arrow_upward
2
arrow_downward

Вы также можете использовать свойство background

 background: {
          image: AegleBase64,
          width: 200,
          opacity: 0.05,
          absolutePosition: { x: 150, y: 250 },
        },

который позволяет указать ширину изображения и использовать absolutePosition, чтобы придать ему положение, подходящее для вашего варианта использования.

person Adewale Olaoye    schedule 10.08.2020