如何在博主收据网站上添加打印按钮？

编程问答 2022-05-26

问题描述

如何向我托管在 blogger.com 上的食谱网站添加打印按钮？ 我有这个食谱网站，我想在网站上添加一个打印按钮，以便访问我博客的用户能够打印食谱。

解决方法

如果您可以打印整个页面，那么您可以使用此代码块：

<button onclick="window.print()">Print this page</button>

如果您只想打印配方，则需要使用 HTML ID 对其进行标记，实现此类解决方案的最佳方法如下： HTML：

<div id="recipe">
       <!-- Your HTML for the recipe goes here -->
</div>
<button onclick="printDIV(recipe)">Print Recipe</button>

还有一点 Javascript：（来自这篇文章：Print the contents of a DIV）

function printDIV(div) {
       var mywindow = window.open('','PRINT','height=400,width=600');

       mywindow.document.write('<html><head><title>' + document.title  + '</title>');
       mywindow.document.write('</head><body >');
       mywindow.document.write('<h1>' + document.title  + '</h1>');
       mywindow.document.write(document.getElementById(elem).innerHTML);
       mywindow.document.write('</body></html>');

       mywindow.document.close(); // necessary for IE >= 10
       mywindow.focus(); // necessary for IE >= 10*/

       mywindow.print();
       mywindow.close();
}

要更改打印尺寸，您可以在 window.open() 函数中更改高度和宽度参数。

bloggergoogle-blogger-apihtml