如何將css文件添加到pdf文檔？

Question

我正在嘗試使用css為PDF文檔的標題添加邊框。 但是我在css中使用的邊界並沒有采用pdf格式。 即使對於圖像我也只使用css，它正在采取，但對於邊界，它不采取。 你能幫我修一下這個邊界嗎？

這是我的HTML：

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Expires" content="0" /> <title></title> <link rel="stylesheet" type="text/css" href="css/ITPortal.css"/> <link rel="stylesheet" type="text/css" href="css/oneHarmanMain.css"/> <link rel="stylesheet" type="text/css" href="css/corev4.css"/> <link rel="stylesheet" type="text/css" href="css/ITServiceCatalog.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jspdf.min.js"></script> <script type="text/javascript" src="js/jspdf.js"></script> <script type="text/javascript" src="js/ITPortal.js"></script> <script type="text/javascript" src="js/compatibility.js"></script> <script type="text/javascript" src="js/html5shiv.min.js"></script> <script type="text/javascript" src="js/IE9.js"></script> <script type="text/javascript" src="js/printContent.js"></script> <script type="text/javascript" src="js/downloadify.min.js"></script> <script type="text/javascript" src="js/canvas.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/typearray.js"></script> <link rel="stylesheet" href="css/print.css" type="text/css" /> <style> #new-logo { visibility: hidden; width: 124px; height: 66px; } @media print { #new-logo { visibility: visible; width: 124px; height: 66px; } input[type=text] { border: 1px solid #ccc !important; text-align: center !important; } .title, .thead.item { margin-right: 1000px !important; position:fixed !important; } #Phead { border: 2px solid #000 !important; } } </style> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <script type="text/javascript"> function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300'); mywindow.document.write('<html><head><title></title>'); mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10 mywindow.print(); mywindow.close(); return true; } function update() { var table = document.getElementById("mytab1"); for (var i = 0, row; row = table.rows[i]; i++) { if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{ var quantity=row.cells[1].childNodes[0].value; row.cells[1].innerHTML = quantity; var priceOne = row.cells[4].childNodes[0].value; row.cells[4].innerHTML = priceOne; var priceTwo = row.cells[5].childNodes[0].value; row.cells[5].innerHTML = priceTwo; var priceThree = row.cells[6].childNodes[0].value; row.cells[6].innerHTML = priceThree; } } var total = document.getElementById('total').value; document.getElementById('grandTotal').innerHTML = total; } </script> <body> <div id="mainContentWide"> <h2>WorkPlace Services</h2> <h3 class="curveBoxWide">Description</h3> <div id="new-logo"> <img src="image/back-logo.png" alt="Harman Logo"/></div> <table id="mytab1"> <thead> <tr class="thead item" id="Phead"> <th><span class="colm1">Desktop Software</span></th> <th><span class="colm1">Quantity</span></th> <th><span class="colm1">One time Price ($)</span</th> <th><span class="colm1">Annual Price ($)</span</th> <th><span class="colm1">One time Extended Cost ($)</span</th> <th><span class="colm1">Annual Extended Cost ($)</span</th> <th><span class="colm1">Sub-Total</span</th> </tr> </thead> <tbody> <tr class="item odd" class="test"> <td class="title"><p>Symantec SEP</p></td> <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td> <td class="price">136</td> <td>6</td> <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td> <td><input class="annualExtendedCost" type="text" value="0" readonly/></td> <td><input class="subtotal1" type="text" value="0" readonly/></td> </tr> <tr class="item"> <td class="title"><p>Citrix</p></td> <td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td> <td class="price">368</td> <td>85</td> <td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td> <td><input class="annualExtendedCost" type="text" value="0" readonly/></td> <td><input class="subtotal1" type="text" value="0" readonly/></td> </tr> </tbody> <tfoot> <tr> <td class="title"><p>Total:</p></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td id="grandTotal"><input id="total" type="text" value="0" readonly/></td> </tr> </tfoot> </table> <!-- end #mainContent --></div> <button onclick="javascript:demoFromHTML()" type="button" id="buttonPDF">Save as PDF</button> <input type="button" value="Print" onclick="javascript:PrintElem('#mainContentWide')" style="margin: 0 20px; padding: 1px 30px" /> <p style="text-align: center; padding-top: 15px"> ('Save as PDF' is working on IE9 and above, chrome and Firefox browsers )</p> </body> </html>

這是我的js文件：

function PrintElem(elem) {
   Popup($(elem).html());
}

function Popup(data){   
   var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
   mywindow.document.write('<html><head><title></title>'); 
   mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
   mywindow.document.write('</head><body >');
   mywindow.document.write(data);
   mywindow.document.write('</body></html>');

   mywindow.document.close(); // necessary for IE >= 10
   mywindow.focus(); // necessary for IE >= 10

   mywindow.print();
   mywindow.close();

   return true;
}  

function demoFromHTML() { 
    var table = document.getElementById("mytab1");
        for (var i = 0, row; row = table.rows[i]; i++) {    
            if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{ 
                var quantity=row.cells[1].childNodes[0].value;
                row.cells[1].innerHTML = quantity;
                var priceOne = row.cells[4].childNodes[0].value;
                row.cells[4].innerHTML = priceOne;
                var priceTwo = row.cells[5].childNodes[0].value;
                row.cells[5].innerHTML = priceTwo;
                var priceThree = row.cells[6].childNodes[0].value;
                row.cells[6].innerHTML = priceThree;
            }  
        }
        var total = document.getElementById('total').value;
        document.getElementById('grandTotal').innerHTML = total;

    var pdf = new jsPDF('1', 'mm', [380, 350])

    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    , source = $('#mainContentWide')[0]

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    , specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function(element, renderer){
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    }

    margins = {
      top: 10,
      bottom: 10,
      left: 10,
      width:1000,
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
        source // HTML string or DOM elem ref.
        , margins.left // x coord
        , margins.top // y coord
        , {
            'width': margins.width // max width of content on PDF
            , 'elementHandlers': specialElementHandlers
        },
        function (dispose){alert('dispose');
          pdf.save('Software.pdf');
        },

        margins
    )  

    document.getElementById("buttonPDF").disabled = 'true'; 
}

CSS文件：

@media print { 
    .title, .thead.item {
        margin-right: 1000px !important;
        position:fixed !important;
    }
    #Phead { border: 2px solid #000 !important; }
    #new-logo { 
        background-image: url("image/back-logo.png");
        width: 124px;
        height: 66px;
    }

}

Answer 1

嘗試設置border-collapse: collapse; 在父<table> 。 根據CSS 2.1規范，除非設置了此屬性，否則行不能具有邊框。 在大多數情況下，屬性默認為border-collapse: separate; 所以它應該是一個壓倒一切的問題。

如何將css文件添加到pdf文檔？

問題描述

1 個解決方案

解決方案1
1 2016-08-11 15:18:24

如何將css文件添加到pdf文檔？

問題描述

1 個解決方案

解決方案1 1 2016-08-11 15:18:24

解決方案1
1 2016-08-11 15:18:24