插件窝 干货文章 js如何实现打印预览

js如何实现打印预览

iframe strong class document 206    来源:    2024-10-19
通过使用 javascript,您可以通过以下 4 个步骤进行打印预览:1. 创建一个隐藏的 iframe;2. 将要预览的文档设置为 iframe 的源;3. 将 iframe 添加到文档中;4. 打印隐藏的 iframe,然后将其移除。

如何使用 JavaScript 进行打印预览

方法:

通过创建隐藏的 iframe,并将其作为文档的子元素,可以实现打印预览。

步骤:

  1. 创建隐藏的 iframe:

    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
  2. 设置 iframe 的源:
    将要预览的文档作为 iframe 的源:

    iframe.src = 'document.pdf'; // 将 'document.pdf' 替换为您的文档 URL
  3. 将 iframe 添加到文档中:

    document.body.appendChild(iframe);
  4. 打印隐藏的 iframe:

    iframe.contentWindow.print();
  5. 移除隐藏的 iframe:
    预览完成后,从文档中移除 iframe:

    iframe.parentNode.removeChild(iframe);

示例:

const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'document.pdf';
document.body.appendChild(iframe);

setTimeout(() => {
  iframe.contentWindow.print();
  iframe.parentNode.removeChild(iframe);
}, 1000); // 1 秒后打印,让 iframe 有时间加载