使用 jQuery 将页面的一部分复制到剪贴板答案

【问题标题】：Copy a part of page into clipboard using jQuery使用 jQuery 将页面的一部分复制到剪贴板
【发布时间】：2011-12-26 15:28:03
【问题描述】：

我有一个用 PHP 编写的 Web 应用程序，其中包含许多 HTML 格式的报告。有时，我在一页中有不同的报告，每个报告都有一个打印按钮。

我的一个解决方案是在新页面中使用 PHP 变量再次生成该报告。

但我认为还有另一种方法可以做到这一点。我可以将所有报表表格的 HTML 代码复制到剪贴板中，打开一个新窗口，在其上粘贴剪贴板数据，最后打印页面内容。我在http://archive.plugins.jquery.com/project/clipboard看到了一些东西，但是这个插件似乎不再起作用了。

您有什么想法可以解决我的问题（跨浏览器）吗？

【问题讨论】：

那么您需要一种将内容复制到浏览器内剪贴板的方法吗？
是的。复制 HTML 标签及其内容...
stackoverflow.com/questions/1539641/… ?
nnnnnn，我怎样才能在新页面上说我最喜欢的数据是什么？
对不起，我删除了我之前的评论，因为我决定将其发布为答案。

标签： jquery html clipboard

【解决方案1】：

我可以将所有报表表格的 HTML 代码复制到剪贴板中，打开一个新窗口，在上面粘贴剪贴板数据，最后打印页面内容。

你不需要剪贴板，即使你可以让它工作，你不应该使用剪贴板：剪贴板是为了用户的方便，而不是你的，并且覆盖之前的内容是不合适的。

幸运的是，您无需靠近剪贴板即可打开一个新窗口并设置其内容：

function printReport(elementId)
{
  var elementToPrint = $("#" + elementId),
      printWin = window.open("", "Print", 'left=20,top=20,width=400,height=400');

  printWin.document.write(elementToPrint.html());
  printWin.document.close();
  printWin.focus();
  printWin.print();
  printWin.close(); // optionally close the new window immediately
}

工作演示（仅在 Chrome 中测试）：http://jsfiddle.net/Vc5yy/

请注意，这显然只是一个简单的解决方案，但它应该为您提供完成自己的解决方案所需的所有部分。您可能需要应用适当的 CSS 样式表等。但主要的是，一旦您打开了第二个窗口，您就可以编写任何您想要的内容，然后调用 window.print() 函数。

请注意，您应该从事件处理程序（如我的演示中显示的按钮单击）运行上述函数，否则浏览器的弹出窗口阻止程序可能不会让它打开。

【讨论】：