打印表格而不預覽

Question

你好朋友我正在使用 vue.js 創建一個表，我想要一個按鈕來打印表中的數據而沒有預覽對話框那么我應該在 vue.js 中編寫我的 javasript 代碼嗎？ 這是我的桌子：

這是我的打印按鈕代碼

 Print: function(){
  var mycocument=document.getElementById('table_users');
  var newWin=window.open("","");
  newWin.document.open();
  newWin.document.write(mycocument.outerHTML);
  newWin.print();
  newWin.close();
}

Answer 1

選項1
你可以嘗試這樣做。

function printDiv() { 
            var divContents = document.getElementById("table_users").innerHTML; 
            var a = window.open('', '', 'height=500, width=500'); 
            a.document.write('<html>'); 
            a.document.write('<body > <h1>This is a sample print</h1> <br>'); 
            a.document.write(divContents); 
            a.document.write('</body></html>'); 
            a.document.close(); 
            a.print(); 
        }

你可以檢查這個例子https://codepen.io/misterjenuel/pen/OJPzqVL

選項 2
您可以使用https://github.com/MrRio/jsPDF 來完成。

*****html*****

<div id="content">
     <h3>Hello, this is a H3 tag</h3>
     <table border="1px" style="border-collapse: collapse;"> 
            <tr> 
                <td>computer</td> 
                <td>Algorithm</td> 
            </tr> 
            <tr> 
                <td>Microwave</td> 
                <td>Infrared</td> 
            </tr> 
        </table> 
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

*****JavaScript：*****

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

選項 3
.. 中的內容可以使用 jspdf 和 html2canvas 以 pdf 格式下載。

你需要參考兩個js庫，

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

然后調用下面的函數，

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

參考： https : //www.freakyjolly.com/jspdf-multipage-example-generate-multipage-pdf-using-single-canvas-of-html-document-using-jspdf/

Answer 2

但是，如果您嘗試直接打印它：

我遇到了另一個優雅的解決方案：

將您的可打印部分放在一個 div 中，其 id 如下所示：

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

現在讓我們創建一個非常簡單的 javascript：

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

來源： https : //stackoverflow.com/a/7532581/1223045

打印表格而不預覽

問題描述

2 個解決方案

解決方案1
0 2020-01-07 02:56:39

解決方案2
0 2020-01-07 03:24:08

打印表格而不預覽

問題描述

2 個解決方案

解決方案1 0 2020-01-07 02:56:39

解決方案2 0 2020-01-07 03:24:08

解決方案1
0 2020-01-07 02:56:39

解決方案2
0 2020-01-07 03:24:08