Блог

Главная - Вопросы по программированию - отображение вывода этикетки на печать, а не на веб-странице

отображение вывода этикетки на печать, а не на веб-странице

#javascript #jquery

Вопрос:

Я пытаюсь отобразить текущую дату и время, когда пользователь нажимает на кнопку печати. Я не хочу видеть дату и время на своей веб-странице. Это тот контент, который я хочу распечатать:

 <div class="box" id="dvContents">
    this is the content, I want to print
   <div id="CalculateGrid" style="margin-top: 60px">
    <asp:Label ID="lblDateTime" runat="server" Style="margin-left: 25%; display: none;" />
   </div>
 </div>

По нажатию кнопки asp я вызываю функцию Javascript. Ниже приведена кнопка и функция javascript:

  <asp:LinkButton  ID="print"  runat="server" OnClientClick="PrintDiv();">Print</asp:LinkButton>

Ниже приведена функция javascript:

 <script>


    function PrintDiv() {
            document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
            document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = new Date().toLocaleString();
            var contents = document.getElementById("dvContents").innerHTML;
            
            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                document.body.removeChild(frame1);
            }, 500);
           
            return false;
        }
       
    
    </script>

В первых двух строках функции javascript я пытаюсь отобразить дату и время:

  document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
 document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = new Date().toLocaleString();

чтобы они могли появиться в распечатке, но как только я нажму на кнопку «Печать», дата и время также появятся на веб-странице. Я не хочу видеть дату и время на своей веб-странице, я просто хочу видеть дату и время на своей распечатке. Я не уверен, что я делаю не так.

Любая помощь будет оценена по достоинству.

Ответ №1:

я провожу здесь эксперимент

 function PrintDiv() {
            document.getElementById('lblDateTime').style.opacity = "0";
            document.getElementById('lblDateTime').innerHTML = new Date().toLocaleString();
        
            var contents2 = document.getElementById("dvContents");
          
            var frame1 = document.createElement('iframe');            
            var contents = document.getElementById("dvContents").innerHTML;
            
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            
            frameDoc.document.write('<style>@media print{ #lblDateTime { opacity:1!important}  }</style>');
            
            frameDoc.document.write('</head><body>');
            
            frameDoc.document.write(contents);               
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
               document.body.removeChild(frame1);
            }, 500);
           
            return false;
        } 
 <div class="box" id="dvContents">
    this is the content, I want to print
   <div id="CalculateGrid" style="margin-top: 60px">
   <div id="lblDateTime" style="opacity:0;display:inline;" ></div>
   </div>

 </div>
 


<button  id="print"  runat="server" onclick="PrintDiv();">Print</button>

попробуйте использовать свой браузер напрямую из-за невозможности печати здесь, надеюсь, это поможет.

Комментарии:

1. Я ввожу приведенный выше код в приложение, и когда я нажимаю на печать, она ничего не печатает. Я даже не вижу всплывающего окна печати

2. Какое сообщение вы получаете на консоли?

3. можешь попробовать это ? jsfiddle.net/trysetyoutomo/L1pnx2g6/2

4. Я не получаю никакого сообщения на консоли. Я попробовал еще раз. когда я нажимаю на кнопку печати, она просто мерцает, и ничего не происходит. Я пробую это в Google chrome.

Метки: ,