获取图像URL并将图像插入到pdfmake.js生成的pdf中

时间:2018-09-08 07:07:49

标签: reactjs image url pdfmake

我使用带有react的pdfmake.js生成了pdf。用户可以在表单字段中编辑内容,并将更改反映到pdf并预览文件。

我希望用户能够选择图像并将所选图像添加到pdf中。如何获取图片网址并将其插入到生成的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中?我应该使用哪种生命周期方法?

0 个答案:

没有答案