将动态背景图像转换为 <img src=""> 以供打印

Question

我正在尝试将动态生成的内联样式背景图像：url("xyz") 转换为将在新 [= 中打开的 img src="xyx" 25=] 用于打印。我可以将 url 内联图像拉入 img src 但是当单击打印按钮时，会打开 2 页；包含 url 文本和父级 window 图像的页面。页面也不断刷新。

函数将 url 内联样式转换为外部图像 window 用于打印，div id 带有内联样式 BG 和打印按钮：

function printImg() { 
  var printWin = window.open();
  var content = "<html>";  
  printWin.document.write( src = document.getElementById("lbImage").style.backgroundImage );
  src = src.replace('url(','');
  src = src.replace('")','');
  content += document.write('<img src='+src+'" />');
  printWin.document.close();
  printWin.focus();
  printWin.print(content);
  printWin.close();
}

<div style="background-image: url("mysite.com/images/randomImg.png"); display: block;" id="lbImage">
<a href"#" type="button" onClick="printImg()" target="_blank">Print</a>

我已经为此忙了一天，似乎遇到了瓶颈...任何建议将不胜感激。

Answer 1

删除 url 文本并在 FireFox、IE 和 Chrome 中正确打印的完整修复：

function printImg() {
  var printWin = window.open();
  var src = src;
  printWin.document.write( src = document.getElementById("lbImage").style.backgroundImage );
  src = src.replace('url(','');
  src = src.replace('example.com','');
  src = src.replace('png)','png');
  src = src.replace('jpg)','jpg');
  src = src.replace(')','');
  printWin.document.write( "<body style='color:#fff;font-size:0px;'>");
  printWin.document.write( "<div style='text-align:center;'>");
  printWin.document.write('<img src='+src+' ' + ' style="width:100%;"/>');
  printWin.document.close();
  printWin.focus();
  printWin.print();
  //printWin.close();  
  //enable this line to close window after print/cancel

}

color:#fff 和 font-size:0px 清除了图像的 url，使其无法写入页面顶部（如果需要，只需删除这些）。 width:100% 允许图像填充 window。我禁用了 printWin.close() 以防万一用户不想打印图像，只将图像另存为...

Answer 2

当我意识到这一点时，我发现解决这个问题的方法非常简单！只需更改此 :

printWin.onload = function() { printWin.print();}

将动态背景图像转换为 <img src=""> 以供打印

Convert a dynamic background image into an <img src=""> for printing

image

url

printing-web-page