2017-09-14 2 views
0

私はボタンクリックでPDFに現在のページをダウンロードしたいので開いたPDFから画像の境界線を削除し、私はhtml2canvas概念を使用し、ここではサンプルコードクロム

$("#btnPdf").click(function(){ 

    var dt = new Date(); 
    var day = dt.getDate(); 
    var month = dt.getMonth() + 1; 
    var year = dt.getFullYear(); 
    var hour = dt.getHours(); 
    var mins = dt.getMinutes(); 
    var postfix = month + "-" + day + "-" + year + "_" + hour + ":" + mins; 
    var docs = 'dd'+ postfix; 



    html2canvas(document.getElementById("main-div"), { 
     onrendered: function(canvas) { 

      var width = canvas.width; 
      var height = canvas.height; 
      var millimeters = {}; 
      millimeters.width = Math.floor(width * 0.264583); 
      millimeters.height = Math.floor(height * 0.264583); 


      var imgData = canvas.toDataURL('image/png',1.0); 
      console.log('Report Image URL: '+imgData); 

      var doc = new jsPDF('p', 'mm', "a4"); //210mm wide and 297mm high 
      doc.deletePage(1); 
      doc.addPage(millimeters.width, millimeters.height); 
      doc.addImage(imgData, 'png',0,0); 
      doc.save(docs+'.pdf'); 
     }, 

    }); 

}); 

あるとfine.Iを取得しています動作しますpdfの現在のページのイメージの境界線は、クロムのpdfを開くときだけですが、AdobeのFirefox、Firefoxなどで開いている間はpdfの枠線が表示されませんでした。どのような提案、どのようにクロムで開いたPDFの画像のための境界線を削除するかをお聞かせください。

クロムによってPDFファイルとして保存するとき、HTMLのスタイルを制御するためにどのように「印刷ページ」:おかげで、事前

答えて

1

に私はあなたの本当の問題があると思いますか?

おそらく、最初にimgスタイルをchrome "Element" pannelまたはjavascriptで設定し、img borderを削除してからsave apiを呼び出すことができます。

PS:PDFとして印刷ページが複雑な場合

私の知る限りでは、何クロムがやって。

たとえば、pdfサイズ(a4/a3/a2)の変換ページコンテンツ(ピクセル)が必要です。

Webデザイナーの中には、<link>要素を属性media="print"に追加することで印刷物の作業を調整するものがあります。したがって、このスタイルファイルは印刷時にのみ有効です。