如何将图像添加到 pdf 文件并在 react native expo 中打印 [英] How to add image to pdf file and print in react native expo
问题描述
我想在 react native expo 移动应用程序中打印一个嵌入了 html 图像的 pdf 文件.当我尝试生成 pdf 文件时，生成的 pdf 文件中不包含图像.有关如何在我的 pdf 文件中包含图像的任何帮助.
createPDF = async (html) =>{尝试 {const {uri} = await Print.printToFileAsync(html);Print.printAsync({ uri });this.setState({callPrint: false});} 抓住(错误){控制台错误(错误)；this.setState({callPrint: false});}};const html = "<身体><div class='title-container'><img source="asset/omnix.png";/></html>";
这是 iOS 上 expo 上的一个已知问题，建议添加一个 fetchImageData 函数将图像转换为 Base64 字符串
createPDF = async (html) =>{...};fetchImageData = (uri) =>{//获取 Base64 字符串的图像数据const data = await FileSystem.readAsStringAsync('file://' + uri, {编码:FileSystem.EncodingType.Base64，});return imageData = 'data:image/png;base64,' + data;};const html = "<身体><div class='title-container'><img source=${fetchImageData('asset/omnix.png')}/></html>";
如果您使用 fetchImageData 来填充所有图像，它们将正确打印
I want to print a pdf file with an html image embedded on it in react native expo mobile application. And when I tried generating the pdf file, image is not included on the generated pdf file. Any help on how to include image in my pdf file.
createPDF = async (html) => {
try {
const {uri} = await Print.printToFileAsync(html);
Print.printAsync({ uri });
this.setState({callPrint: false});
} catch(err) {
console.error(err);
this.setState({callPrint: false});
}
};
const html = "
<html>
<body>
<div class='title-container'>
<img source="asset/omnix.png" />
</div>
</body>
</html>
";
This is a known problem on iOS for expo, adding a fetchImageData function to convert the image to a Base64 string is the recommended fix
createPDF = async (html) => {...};
fetchImageData = (uri) => { // fetch Base64 string of image data
const data = await FileSystem.readAsStringAsync('file://' + uri, {
encoding: FileSystem.EncodingType.Base64,
});
return imageData = 'data:image/png;base64,' + data;
};
const html = "
<html>
<body>
<div class='title-container'>
<img source=${fetchImageData('asset/omnix.png')} />
</div>
</body>
</html>";
If you use fetchImageData to fill all your images they will print correctly
这篇关于如何将图像添加到 pdf 文件并在 react native expo 中打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
