堆棧內存溢出
  簡體   English   中英

打印網頁的特定部分

[英]Print specific part of webpage

 原文  2012-10-21 10:44:28  4   17    javascript/ html/ printing

問題描述

我正在嘗試打印我的應用程序的特定部分。

該應用程序有一個用戶列表，顯示他們的名字和姓氏。 當我單擊用戶時，我會彈出一個包含有關他們的更詳細信息的彈出窗口。

我將如何 go 僅打印我單擊的用戶的彈出窗口？ 彈出窗口如下所示：

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

打印按鈕還沒有工作。

17 個解決方案

解決方案1
 162 已采納  2012-10-21 10:58:16

您可以使用簡單的 JavaScript 從頁面打印特定的 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();

解決方案2
 14  2016-10-13 14:03:56

我制作了這個 jQuery 擴展來打印所選元素的 HTML： $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

在這里查看它的實際效果。

解決方案3
 13  2012-10-21 10:56:47

您必須打開一個新窗口（或導航到一個新頁面），其中僅包含您希望用戶能夠打印的信息

腳本：

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML：

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

這里有一些注意事項：錨點和包含要打印的內容的 div 之間不能有空格

解決方案4
 11  2017-03-30 06:48:10

代替所有復雜的 JavaScript，您實際上可以使用簡單的CSS來實現這一點：只需使用兩個 CSS 文件，一個用於正常屏幕顯示，另一個用於僅顯示您希望打印的內容。 在后一個文件中，隱藏您不想打印的所有內容，僅顯示彈出窗口。

記得定義兩個 CSS 文件的media屬性：

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />

解決方案5
 6  2018-01-11 21:09:15

只需使用 CSS 隱藏您不想打印的內容。 當用戶選擇打印時 - 頁面將查看“ media="print" CSS 以獲取有關頁面布局的說明。

media="print" CSS 有隱藏我們不想打印的內容的指令。

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>

解決方案6
 2  2017-07-04 03:29:03

這是我的增強版本，當我們要加載 css 文件或要打印的部分中有圖像引用時。

在這些情況下，我們必須等到 css 文件或圖像完全加載后才能調用 print() 函數。 因此，我們最好將 print() 和 close() 函數調用移動到 html 中。 以下是代碼示例：

var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();

解決方案7
 2  2019-12-10 10:21:05

樣式

 @media print {

       .no-print{
               display : none !important;
                }
              }

查詢

    function printInvoice()
 {
     printDiv = "#printDiv"; // id of the div you want to print
     $("*").addClass("no-print");
     $(printDiv+" *").removeClass("no-print");
     $(printDiv).removeClass("no-print");

     parent =  $(printDiv).parent();
     while($(parent).length)
     {
         $(parent).removeClass("no-print");
         parent =  $(parent).parent();
     }
     window.print();

 }

打印按鈕 Html

<input type="button" onclick="printInvoice();" value="Print">

解決方案8
 2  2020-08-21 14:11:50

嘗試這個：

  1. 將容器的 innerHTML 轉儲到 iFrame（加上任何特定於打印的 CSS
  2. 打印 iFrame 內容。

在JSFiddle 中嘗試一下（iframes 在 StackOverflow 的預覽中似乎不起作用）

您可以在此處查看代碼，但由於 StackOverflow 渲染器中可能存在安全限制，它無法工作。 

 const printButton = document.getElementById('print-button'); printButton.addEventListener('click', event => { // build the new HTML page const content = document.getElementById('name-card').innerHTML; const printHtml = `<html> <head> <meta charset="utf-8"> <title>Name Card</title> </head> <body>${content}</body> </html>`; // get the iframe let iFrame = document.getElementById('print-iframe'); // set the iFrame contents and print iFrame.contentDocument.body.innerHTML = printHtml; iFrame.focus(); iFrame.contentWindow.print(); });
 <h1>Print your name badge</h1> <div id="name-card" class="card"> <p>Hello my name is</p> <h2>Max Powers</h2> </div> <p>You will be required to wear your name badge at all times</p> <a id="print-button" class="btn btn-primary">Print</a> <iframe id="print-iframe" width="0" height="0"></iframe>

解決方案9
 1  2018-06-09 16:44:25

我有更好的選擇，

首先按類名或id分隔可打印和不可打印部分

 window.onafterprint = onAfterPrint; function print(){ //hide the nonPrintable div } function onAfterPrint(){ // Visible the nonPrintable div }
 <input type="button" onclick="print()" value="Print"/>

就這樣

解決方案10
 1  2020-09-05 07:44:28

試試這個。

export function printSectionOfWebpage(sectionSelector) {
    const $body = jquery('body');
    const $sectionToPrint = jquery(sectionSelector);
    const $sectionToPrintParent = $sectionToPrint.parent();
    const $printContainer = jquery('<div style="position:relative;">');

    $printContainer.height($sectionToPrint.height()).append($sectionToPrint).prependTo($body);

    const $content = $body.children().not($printContainer).not('script').detach();

    /**
     * Needed for those who use Bootstrap 3.x, because some of
     * its `@media print` styles ain't play nicely when printing.
     */
    const $patchedStyle = jquery('<style media="print">')
        .text(
            `
          img { max-width: none !important; }
          a[href]:after { content: ""; }
        `
        )
        .appendTo('head');

    window.print();

    $body.prepend($content);
    $sectionToPrintParent.prepend($sectionToPrint);

    $printContainer.remove();
    $patchedStyle.remove();
}

解決方案11
 1  2021-09-19 13:40:37

你可以使用這個JQuery 插件

解決方案12
 0  2015-02-04 22:32:01

如此處所回答： https : //stackoverflow.com/a/1072151/421243 ，您可以使用 Javascript 將特定部分添加到隱藏框架中，將其聚焦並打印出來。

解決方案13
 0  2019-03-11 09:17:43

我編寫了一個名為PrintElements的小型 JavaScript 模塊，用於動態打印網頁的某些部分。

它的工作原理是遍歷選定的節點元素，對於每個節點，它會向上遍歷 DOM 樹，直到 BODY 元素。 在每一層，包括初始層（即待打印節點的層級），它將標記類（ pe-preserve-print ）附加到當前節點。 然后將另一個標記類 ( pe-no-print ) 附加到當前節點的所有兄弟節點，但pe-preserve-print是它們上沒有pe-preserve-print類。 作為第三幕，它還將另一個類附加到保留的祖先元素pe-preserve-ancestor 。

一個非常簡單的補充僅打印 css 將隱藏和顯示相應的元素。 這種方法的一些好處是保留了所有樣式，它不會打開新窗口，不需要移動大量 DOM 元素，並且通常不會侵入您的原始文檔。

請參閱演示，或閱讀相關文章以獲取更多詳細信息。

解決方案14
 0  2020-05-01 18:41:09

這里對我有用

使用 jQuery 和https://developer.mozilla.org/en-US/docs/Web/API/Window/open

  var $linkToOpenPrintDialog = $('#tvcPrintThisLinkId');
  var windowObjectReference = null;
  var windowFeatures = 'left=0,top=0,width=800,height=900,menubar=no,toolbar=no,location=yes,resizable=no,scrollbars=no,status=no';
  var windowFeaturesStyles = '<link rel="stylesheet" media="print" href="/wp-content/themes/salient-child/dist/css/app-print.css">';

  $linkToOpenPrintDialog.on('click', function(event) {
    openPrintDialog(this.href, this.target, 'tvcInnerCalculatorDivId', event);    
    return false;
  });

  function openPrintDialog(url, windowName, elementToOpen, event) {

    var elementContent = document.getElementById(elementToOpen);

    if(windowObjectReference == null || windowObjectReference.closed) {

      windowObjectReference = window.open( url, windowName, windowFeatures);
      windowObjectReference.document.write(windowFeaturesStyles);
      windowObjectReference.document.write(elementContent.innerHTML);
      windowObjectReference.document.close();
      windowObjectReference.focus();
      windowObjectReference.print();
      windowObjectReference.close();

    } else {
      windowObjectReference.focus();
    };

    event.preventDefault();
  }

app-print.css

@media print { 

  body { 
    margin: 0; 
    color: black; 
    background-color: white;
  } 

}

解決方案15
 0  2022-08-13 06:08:07

如果有很多 css 依賴，上面的解決方案就會變得難以使用。 如果您不介意使用 3rd 方庫 ( html2canvas )，您可以嘗試對 @pmtamal 的答案稍作修改的方法。

  • 將目標div中的html內容轉換為canvas
  • 打開一個新的 window 並將 canvas 連接到該 window
  • 打印

代碼示例：

let prtContent = document.querySelector(target);

html2canvas(prtContent).then(canvas => {
   let WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
   WinPrint.document.body.appendChild(canvas);
   WinPrint.document.close();
   WinPrint.focus();
   WinPrint.print();
   WinPrint.close();

});

解決方案16
 -1  2016-05-05 07:51:38

在printPageArea()函數中，傳遞要打印的特定 div ID。 我從 codexworld.com 找到了這段 JavaScript 代碼。

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

完整的代碼和教程可以從這里找到 -如何使用 JavaScript 打印頁面區域。

解決方案17
 -1  2019-10-18 11:03:49

試試這個很棒的ink-html庫

import print from 'ink-html'
// const print = require('ink-html').default

// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 打印網頁asp.net的特定部分 使用CSS打印網頁的一部分 打印網頁的一部分-CSS未顯示 如何使用node-jade模板引擎打印網頁的特定部分 如何打印網頁的一部分，包括所選內容 有沒有辦法打印出網頁的特定div為pdf？ 如何在Chrome中的每個打印頁面上打印部分網頁（標題） 如何在 Javascript 中打印 json 的特定部分？ 鏈接到網頁的特定部分，但距頂部一定高度 如何通過window.print（）打印頁面的某些特定部分
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM