Question

＆＃13;

$(function() {

  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $('#cmd').click(function() {
    var doc = new jsPDF();
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script type="text/javascript" src="library/BlobBuilder.js"></script>
<script type="text/javascript" src="pdf.js"></script>


<div id="target">
  <div id="content">
    <h3>Hello, this is mathit app</h3>
    <a class="upload">Upload to Formulas</a>
    <h2>
            This is <b>10th Std Notes</b> <span style="color: red"></span>
        </h2>
    <p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x. Thus, P(x) = ax2 + bx + c =0, R is known as the standard form of quadratic
      equation. There are two types of quadratic equation. (i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0. (ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is equal
      to 0.
    </p>
  </div>
</div>
<button id="cmd">generate PDF</button>

＆＃13;

如何下载div标签详细信息并保存png图像。我有一些代码下载pdf的双倍下载我想下载pdf中的一个和png图像中的另一个如何更改代码请帮助我例如用户单击按钮下载pdf和png图像。< / p>

Answer 1

您可以借助HTML2Canvas jquery file和HTML5下载属性实际执行此操作。

$(document).ready(function() {

  var element = $("#html-content-holder"); // global variable
  var getCanvas; // global variable
  html2canvas(element, {
    onrendered: function(canvas) {

      getCanvas = canvas;
    }
  });
  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $("#cmd").on('click', function() {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);

    var doc = new jsPDF();
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });


});

jsfiddle

如何使用js下载图像格式的div标签描述

1 个答案: