如何将图像添加到 pdf 文件并在 react native expo 中打印

文件并在

关注

发信

关注(28)粉丝(399)

如何将图像添加到 pdf 文件并在 react native expo 中打印

本文介绍了如何将图像添加到 pdf 文件并在 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 中打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 17:49