如何在打印前将 div 的所有元素组合成静态图像？

Question

我继承了一个项目，所以里面有很多javascript和jquery，我不明白最初的意图，所以请耐心等待我提出任何后续问题。

我有一个工具，您可以将卡片上的图像替换为您想要的任何其他图像（通过裁剪器）。一旦所有内容的大小和位置都按照您认为合适的方式调整后，单击打印后，所有元素都会恢复为没有自定义样式的任何内容。以下是原始开发人员必须完成的任务：

    var frontPosition, backPosition;

    window.onbeforeprint = function(event){
      
      frontPosition = $(initial_image_front).position();
      backPosition = $(initial_image_back).position();

      if ( frontPosition.top > 0 ) {
        $(initial_image_front).css({ top: frontPosition.top * 0.470588235 });
      }
      if ( frontPosition.top < 0 ) {
        $(initial_image_front).css({ top: (-Math.abs(frontPosition.top) * 0.366863905) });
      }
      if ( frontPosition.left !== 0 ) {
        $(initial_image_front).css({ left: 0 });
      }

      if ( backPosition.top > 0 ) {
        $(initial_image_back).css({ top: backPosition.top * 0.470588235 });
      }
      if ( backPosition.top < 0 ) {
        $(initial_image_back).css({ top: (-Math.abs(backPosition.top) * 0.366863905) });
      }
      if ( backPosition.left !== 0 ) {
        $(initial_image_back).css({ left: backPosition.left * 0.59 });
      }

    };

    window.onafterprint = function(event){
      
      $(initial_image_front).css({ top: frontPosition.top, left: frontPosition.left });
      $(initial_image_back).css({ top: backPosition.top, left: backPosition.left });

    };

这是相应的html：

<div>
  <div class="flex justify-center mb-2 print-hidden">
    <p class="font-head text-white opacity-50">FRONT</p>
  </div>
  <div class="card front flex flex-col mx-auto" style="width: 575px; height: 408px;">
    <%= render 'card_head' %>
    <div class="flex w-7/12 pl-4 pt-3 pb-6 print:pl-2 print:pt-0 print:pb-3 flex-grow flex-wrap items-center justify-center">
      <%# other stuff %>
    </div>
    <%= image_tag "laurie.png", style: "left: 267px; top: 0;", class: "card__image absolute z-0", id: "initial_image_front" %>
  </div>
  <div class="flex justify-between mb-2 mt-2 print-hidden">
    <%# other stuff %>
    <%= form_for(Card.new, remote: true, url: save_photo_path) do |f| %>
      <label>
        <p class="font-head text-white opacity-80 hover:opacity-100 hover:text-red cursor-pointer" id="change_front">Change Photo</p>
        <%= f.file_field :photo, class: "hidden input_front" %>
      </label>
      <div class="hidden">
        <%= f.submit %>
      </div>
    <% end %>
  </div>
</div>

这是之前和之后：

我假设正在发生的是所有 div 都被组织在一起，但我想保留提交表单之前的样式。我想删除所有

window.onbeforeprint

和

window.onafterprint

但我仍然得到相同的结果，这就是为什么我认为原始开发人员造成了这种混乱哈哈。有没有比调整所有 css 后更简单的方法来实现打印图像？

它使用顺风，但显然有很多样式似乎有点过分，无论是内联样式还是导入样式表。我会在其他时间解决这个问题，除非它对于解决我的问题非常重要。

编辑：添加我尝试过的内容。我遵循了很多 s/o 答案（例如 window.print() CSS 未在打印预览中加载），确保首先将我的样式表直接导入到打印窗口中。虽然它确实导入了这些样式表，但样式仍然非常不正确。

Answer 1

感谢一位朋友，这是一个非常简单的解决方案：

<%= image_tag "laurie.png", style: "width: 307px; height: 409px; right:0; top: 0;", class: "card__image absolute z-0", id: "initial_image_front" %>

只需将

right: 0

添加到此元素即可。最终我想回去简化所有这些额外的样式，但现在没有足够的时间。