使用 AngularJs 未在虾 pdf 中呈现图像

Posted 2023-02-19

【中文标题】使用 AngularJs 未在虾 pdf 中呈现图像

【英文标题】：Image not rendered in prawn pdf using AngularJs

【发布时间】：2015-11-17 09:09:29

【问题描述】：

我有一个 ReportPdf 继承自 Prawn::Document。 当我从 Rails 控制台测试它时，pdf 中嵌入的 png 图像正确呈现。

ReportPdf.new(param1,param2).render_file('/Users/ZZ/Desktop/test.pdf')

但是，当它被控制器请求时：

def generate_pdf
  pdf = ReportPdf.new(param1, param2)
  send_data pdf.render, filename: 'report.pdf', type: 'application/pdf'
end

图片没有渲染，其他内容渲染没有问题。

我尝试过使用本地图像和来自 Amazon S3 的图像。两者都可以在控制台中正常工作，但不能从控制器中正常工作。

控制器中的generate_pdf 方法也给出了正确的pdf。如果我直接请求，PDF 会正确呈现。我用 Postman 测试过。

但是，PDF 中的图像不是仅在从 Angular 中的导出按钮请求时才呈现的。以下是实现：

后端：

class ReportPdf < Prawn::Document
  def initialize(param1, param2)
    super()
    @param1 = param1
    @date = Time.zone.parse(param2) || Time.zone.now
    header
  end

  def header
    img = open('https://s3-ap-southeast2.amazonaws.com/bucket/folder/logo.png')
    # use local image
    # img = "#Rails.root/app/assets/images/logo.png"
    data = [[ image: img, image_width: 150, vposition: :center ,
           "#@param1.name - #@param2.suburb"]]
    table(data, cell_style:  borders: , 
                            valign: :center, align: :right, size: 25, width:
                          270 )
  end
end

前端：

  $scope.exportToPdf = function() 
    var tmpDate = moment(new Date($scope.date)).format('DD-MM-YYYY');
    $http(
      method: 'GET',
      url: '/resourceA/' + $stateParams.resourceAId + '/resourceB/daily_pdf?day=' + tmpDate
    ).
    success(function(data, status, headers, config) 
      var anchor = angular.element('<a/>');
      anchor.attr(
        href: 'data:application/pdf;charset=utf-8,' + encodeURI(data),
        target: '_blank',
        download: 'daily_report.pdf'
      )[0].click();
    ).
    error(function(data, status, headers, config) 
      // something here.
    );
  ;

我猜是编码的问题，图像二进制数据在编码过程中被破坏了。 哪里错了？

【问题讨论】：

您的视图模板在哪里？即report.pdf.erb

我正在使用这里介绍的类似方法 (idyllic-software.com/blog/…)。我没有将 html 转换为 pdf，没有视图模板。

1.您正在传递图像原始数据或路径，具体取决于它是本地的还是远程的——这似乎是错误的；也... 2. 尝试打印出img 对象的数据或类以查看来自open(img_url) 的返回值...我想知道那条线是否不是横向移动的地方...

@ZhongZheng 你有没有找到解决方案？

@prees 不幸的是，我没有得到解决方案，所以我没有解决这个问题。

【参考方案1】：

当我们看不到尝试将图像添加到 PDF 的代码时，很难判断错误出在哪里。 ReportPdf 是如何访问图片的？

也许这里有针对您的情况的提示。在我的代码中，当为画廊生成 pdf 时，画廊会创建 pdf，并通过如下调用将其每张照片添加到 pdf 中：

photo = Photo.find(photo_id)
photo.add_to_pdf(pdf, h_pos, v_pos, h_size, v_size)

photo 类方法使用（layout calcs 去掉）：

def add_to_pdf(pdf, h_pos, v_pos, h_size, v_size)
  pdf.image self.image.path(:full),
            :position => pos_sym,
            :vposition => vpos_sym,
            :fit => [size,vsize]
end

Prawn 用于生成 pdf，回形针用于图像附件（照片 has_attached_file :image）