получить URL-адрес изображения и вставить изображение в pdfmake.js сгенерированный PDF - PullRequest
Новая
       21

получить URL-адрес изображения и вставить изображение в pdfmake.js сгенерированный PDF

0 голосов
/ 08 сентября 2018

Я сгенерировал pdf, используя pdfmake.js с реакции. Пользователи могут редактировать содержимое с помощью поля формы, отображать изменения в формате PDF и просматривать файл.

Я хочу, чтобы пользователи могли выбирать изображения, а выбранное изображение добавлялось в pdf. Как получить URL-адрес изображения и вставить его в созданный файл pdfmake.

Я относительно новичок в реакции и pdfmake. 

      export default class App extends React.Component {
        //setting the text that will be reflected in the pdf
            constructor() {
                    super();
                    this.state = { data1: '', data2: '' };
                    this.onChange = this.onChange.bind(this);

                    this.createPdf = this.createPdf.bind(this);
                        this.createPdf();//create the pdf
                      }
            createPdf() {
                        const { vfs } = vfsFonts.pdfMake;
                        pdfMake.vfs = vfs;
                        var dd = {
                            content: [
                                this.state.data1,
                                this.state.data2,
                                 {
                            // I want the image here
                                  image: 'https://pixabay.com/get/ea34b00c2bf5093ed1584d05fb1d4796e372e6d618b00c4090f3c77aafefb4b9dd_640.jpg',
                                  width: 150
                                },
                              ]
                    }

    //crafting pdf
                    const pdfDocGenerator = pdfMake.createPdf(dd);
                    pdfDocGenerator.getDataUrl(dataUrl => {
                    const targetElement = document.querySelector('#iframeContainer');
                    const iframe = document.createElement('iframe');


    //generating a preview
                      if (!targetElement.firstChild) {
                        iframe.src = dataUrl;
                        targetElement.appendChild(iframe);
                      } else {
                        iframe.src = dataUrl;
                        targetElement.firstChild.remove();
                        targetElement.appendChild(iframe);
                      }
                    });
          }

          onChange(){
            //some codes here
          }
          onPreviewClick(){
            this.createPdf()
          }
          render() {
              return(
               //some form for editing here

              //preview of the pdf here
            )
          }
}

Извините за структуру кода noob.

Как мне загрузить изображение и вставить в pdf? Какой метод жизненного цикла я должен вызывать его?

...