jspdf功能没有在PDF中获取任何图像答案

【问题标题】：Not getting any images in the PDF for jspdf functionjspdf功能没有在PDF中获取任何图像
【发布时间】：2021-08-23 06:47:34
【问题描述】：

我是开发新手，点击 reactjs 中的下载图片按钮时出现此错误。

点击下载图片时，我得到一个空白的 pdf。

这是我在aclass上面的react中的函数

pdfGenerate = () =>{
     var doc=new jsPDF('landscape','px','a4','false');
     var base64Img = 'https://firebasestorage.googleapis.com/v0/b/tsl-coil-qlty-monitoring- 
     dev.appspot.com/o/1a60ce3b-eddf-4e72-b2af-b6e99873e926?alt=media&token=61399a02-1009- 
     4bb9-ad89-d1235df900e4';
     
     doc.addImage(base64Img,'JPEG',65,20,500,400)
     doc.save('CQMS_IMAGES.pdf')
     
  }

我希望在 pdf 中生成图像，但是什么都没有。

这是我的按钮：

<Button style={{float: 'right'}} color="primary" size= "sm" onClick= 
              {this.pdfGenerate}>Download Images</Button>

我做错了什么。请帮忙

【问题讨论】：

标签： javascript html reactjs image-processing jspdf

【解决方案1】：

您的代码是正确的，但问题在于您用于图像的 URL。实际上，该 URL 并未提供任何图像格式的图像。我认为这是base64编码的图像。如果您尝试通过转到该 URL 来下载图像，您将看到如果您下载图像，则不会出现文件扩展名。当您尝试下载图像时，您必须明确编写文件扩展名，这证明 URL 没有以任何有效的图像格式向我们提供图像。试试这个，

pdfGenerate = () =>{
         var doc=new jsPDF('landscape','px','a4','false');
         var base64Img = 'https://firebasestorage.googleapis.com/v0/b/tsl-coil-qlty-monitoring- 
         dev.appspot.com/o/1a60ce3b-eddf-4e72-b2af-b6e99873e926?alt=media&token=61399a02-1009- 
         4bb9-ad89-d1235df900e4';
         
    var imgData = 'data:image/jpeg;base64,'+ Base64.encode(base64Img);
         doc.addImage(imgData,'JPEG',65,20,500,400)
         doc.save('CQMS_IMAGES.pdf')
         
      }

如果这不起作用，试试这个，

   pdfGenerate = () =>{
             var doc=new jsPDF('landscape','px','a4','false');
             var base64Img = 'https://firebasestorage.googleapis.com/v0/b/tsl-coil-qlty-monitoring- 
             dev.appspot.com/o/1a60ce3b-eddf-4e72-b2af-b6e99873e926?alt=media&token=61399a02-1009- 
             4bb9-ad89-d1235df900e4';
             
        var imgData = 'data:image/jpeg;base64,'+ base64Img;
             doc.addImage(imgData,'JPEG',65,20,500,400)
             doc.save('CQMS_IMAGES.pdf')
             
          }

PS：我不确定两者。不过你可以试试这些。

谢谢。

【讨论】：