我使用带有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中?我应该使用哪种生命周期方法?