如何将图像添加到pdf文件并在React Native Expo中打印

psa*_*eys 5 html react-native

我想在 React Native Expo 移动应用程序中打印一个嵌入了 html 图像的 pdf 文件。当我尝试生成 pdf 文件时,生成的 pdf 文件中不包含图像。有关如何将图像包含在我的 pdf 文件中的任何帮助。

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>
    ";

Run Code Online (Sandbox Code Playgroud)

Ale*_*lby 0

这是 iOS 上的已知问题,fetchImageData建议修复添加将图像转换为 Base64 字符串的函数

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>";
Run Code Online (Sandbox Code Playgroud)

如果您使用fetchImageData填充所有图像,它们将正确打印