Question

我正在用角度2中的window.print（）方法以PDF形式打印我的收据（发票）窗口，它在PC浏览器上运行得很好，我们可以看到PDF并能够下载它但主要问题是该功能未在手机的浏览器上运行，无法下载或保存PDF。下面是我的downloadReceipt（）方法：

 downloadReciept(): void {
   var printContents, popupWin;
   printContents = document.getElementById('content').innerHTML;
   popupWin = window.open('', '_blank', 
   'top=0,left=0,height=100%,width=100%');
   popupWin.document.open();
   popupWin.document.write(`
       <html>
         <head>
         </head>

         <body onload="window.print();window.close()">${printContents} 
         </body>
       </html>`
);
popupWin.document.getElementById('hidden').style.display='block';
popupWin.document.close();
this.loading = false;


     }

其中的主要问题不是在手机上运行。...请帮助，还有其他方法可以下载角度为2的PDF格式的发票或html窗口吗？？？请提出建议。

Answer 1

使用此代码伴侣

const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();

Answer 2

嗨，我已经使用具有自定义尺寸的打印选项将html转换为pdf：

首先关闭检查的jQuery版本可能是不支持打印的最新版本：我已使用<script src="/js/jquery.min.js"></script>



如果要使用画布大小的pdf，请在打印介质选项中使用size属性，并且将页边距设为零，以便隐藏标题和页数：

@media print { @page {   size:5.4cm 9.1cm; margin:0; 
page-break-after: auto;  }

可打印的div应该被赋予id = target_warpper1;

还使用CSS在js中隐藏其他元素

HTML：

<div id="target_warpper1_print">
    <div class="visiting-card-right">
        <div class="visiting-card-up active">Employee Id</div>
        <div class="visiting-card-down active">
            <div class="visiting-card-logo"><img src="../images/visiting-card/logo.svg" alt="Vishal Korade Logo"></div>
            <div class="visiting-card-detail">
                <div class="visiting-card-name">Vishal Korade</div>
                <div class="visiting-card-designation">Front End Developer</div>
                <div class="visiting-card-txt visiting-card-email1"><span class="card-img"><img src="../images/visiting-card/mail.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-email">janhavi.vishal@gmail.com</span></div>
                <div class="visiting-card-txt visiting-card-number1"><span class="card-img"><img src="../images/visiting-card/number.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-number">9769367630</span></div>
                <div class="visiting-card-txt visiting-card-skype1"><span class="card-img"><img src="../images/visiting-card/skype.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-skype">test</span></div>
                <div class="visiting-card-txt visiting-card-address1"><span class="card-img"><img src="../images/visiting-card/address.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-address">7 Straits View Marina One East Tower, test, 66337</span></div>
            </div>
        </div>
    </div>
    <div class="visiting-card-left">
        <div class="visiting-card-up"><img src="../images/logohome.png" alt="Vishal Korade Logo"></div>
        <div class="visiting-card-down"><img class="page-cover" src="../images/visiting-card/page-cover.svg" alt="Vishal Korade ID Page Cover"></div>
    </div>
</div>
 <div class="download-pdf" id="create_pdf" onclick="PrintElem()">Download as PDF</div>

JS:
function PrintElem(target_warpper1)
{
    var mywindow = window.open('', 'PRINT', 'height=680,width=1200,toolbars=no,scrollbars=no,status=no,resizable=no');
   // mywindow.document.writeln('<html><head><title>' + document.title  + '</title>');
    mywindow.document.writeln('</head><body >');
    mywindow.document.writeln('<link rel="stylesheet" href="/style/style.css">');
    mywindow.document.writeln('<style>');
    mywindow.document.writeln(' * { -webkit-print-color-adjust: exact !important;  color-adjust: exact !important;        }');
    mywindow.document.writeln(' body {background-color: #1f2959;}');
    mywindow.document.writeln('.card-left {background-color: #1f2959;float: left;}');
    mywindow.document.writeln('#target_warpper1 {display: block;width: 204px;padding-bottom: 0px;float: none;margin: 0 auto;}');
    mywindow.document.writeln('.visiting-card-right {width: 204px; float: none; margin: 0px auto; }');
    mywindow.document.writeln('.visiting-card-left { width: 204px;float: none; margin: 25px auto 0;}');
    mywindow.document.writeln('#target_warpper1_print { display: block;width: 204px;padding-bottom: 0px;margin-right:0px;float: none;margin: 0 auto; }');
    mywindow.document.writeln(' .visiting-card-up, .visiting-card-down::after, .visiting-card-down::before, .visiting-measure  { display:none;}');
    mywindow.document.writeln(' @media print { @page {   size:5.4cm 9.1cm; margin:0;  page-break-after: auto;  }  html, body {  height: 99%;} .print:last-child { page-break-after: auto;}  }');
    mywindow.document.writeln('</style>');
    mywindow.document.writeln(document.getElementById('target_warpper1').innerHTML);
    mywindow.document.writeln('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
    $(mywindow).load(function(){
       mywindow.print();
        mywindow.close();
    });
    return true;
}

如果您需要任何其他信息，请告诉我。

当我们在手机上以角度2打开网站时，window.print（）不会生成PDF并且无法将其下载

2 个答案: