Question

我目前正在尝试在我的网站上制作打印按钮。单击打印按钮后，它应该获取textarea的内容并在about：blank中打开它。

<textarea id="icontent" placeholder="Enter your content here." name="mas" rows="15" class="content">
</textarea>

<a id="wprint" class="btn">Print</a>

是否可以仅使用前端进行此操作。

Answer 1

你可以这样做。添加onclick =＆＃34; openBlank（）＆＃34;到你的打印按钮：

<textarea id="icontent" placeholder="Enter your content here." name="mas" rows="15" class="content">
</textarea>

<a id="wprint" class="btn" onclick="openBlank()">Print</a>

添加一个功能，以便将textarea的文本打印到空白页面中：

function openBlank()
{
   var text = document.getElementById("icontent").value;
   var myWindow = window.open('');
   myWindow.document.write(text);
}

Answer 2

当你没有阻挡者时试试这个

<script>
      output = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, inventore?'
      window.open().document.write(output)
</script>

Answer 3

document.write的替代方法是使用数据URI。顺便说一下，这也是呈现不是HTML内容的唯一方法（通过将data:text/html,更改为例如data:text/plain,）。

由于Stack Overflow的内容安全设置，以下代码段不起作用，但您可以在JSFiddle上看到它：https://jsfiddle.net/4jkn0o6r/2/

＆＃13;

const button = document.getElementById('wprint');
const textarea = document.getElementById('icontent');

button.addEventListener('click', evt => {
  const data = encodeURIComponent(textarea.value);
  const doc = 'data:text/html,' + data;
  window.open(doc, '_blank');
});

＆＃13;

<textarea id="icontent">
<h1>Hello</h1>
</textarea>

<a id="wprint">Print</a>

＆＃13;

Answer 4

我建议将文本区域打印到div，然后打印特定的div。与StackOverflow向您显示文本框预览的方式类似。或者，如果您不希望用户看到该内容，则可以隐藏div，其中包含文本框信息。然后，您可以轻松打开一个新窗口来打印该特定信息。

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

我不相信此代码适用于在文本框中打印信息，这就是为什么我建议您将文本框输入打印到div

是否可以在about：blank中打开textarea的内容？

4 个答案: