Question

我正在尝试将动态生成的内联样式background-image：url（“xyz”）转换为img src =“xyx”，将在新的选项卡/窗口中打开以进行打印。我可以将url内嵌图像拉入img src，但是当点击打印按钮时，会打开2页;包含url文本和父窗口中图像的页面。页面也不断更新。

用于将url内联样式转换为外部窗口中的图像以进行打印的功能以及具有内联样式BG和打印按钮的div id：

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

删除网址文字并在FireFox，IE和Chrome中正确打印的完整修复：

＆＃13;

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

}

＆＃13;

color:#fff和font-size:0px清除图像的网址，从而写入页面顶部（如果需要，只需删除它们）。 width:100%允许图像填充窗口。我禁用了printWin.close()以防万一用户不想打印图像，只保存图像为...

Answer 2

当我意识到这一点时，我发现这个解决方案非常简单！只需改变一下：

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

将动态背景图像转换为<img src=""/>进行打印

2 个答案: