recherche

Maison >interface Web >js tutoriel >Comment implémenter la fonction de conversion HTML en PDF dans JS

Comment implémenter la fonction de conversion HTML en PDF dans JS

亚连
亚连original
2018-06-07 14:30:282756parcourir

Cet article présente principalement la fonction de conversion HTML en PDF implémentée par JS et la combine avec un exemple complet pour analyser les compétences opérationnelles spécifiques de conversion de données au format HTML en PDF basées sur le plug-in côté navigateur jsPDF Friends. ceux qui en ont besoin peuvent s'y référer

L'exemple de cet article décrit la fonction de conversion html en pdf implémentée par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : 

<!DOCTYPE html>
<html>
<head>
 <title>jsPDF插件</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="https://code.jquery.com/jquery-git.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
<body>
 <p class="pdf-wrapper" ="to-pdf">HTML content...<h1>中文</h1>
  中国,汉字,测试:合同 模版 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国</br>中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................<br/>
  中国,汉字,测试:合同 模版 ...................<br/>
   计费 接口 ....................<br/>
  <img src=&#39;http://www.jb51.net/images/logo.gif&#39;/>
 </p>
 <script type="text/javascript">
  var pdf = new jsPDF(&#39;p&#39;,&#39;pt&#39;,&#39;a4&#39;);
  pdf.internal.scaleFactor = 1;
  var options = {
    pagesplit: true
  };
  //$(&#39;.pdf-wrapper&#39;)
  pdf.addHTML(document.body,options,function() {
   pdf.save(&#39;web1111.pdf&#39;);
  });
 </script>
</body>
</html>

Effet de fonctionnement :

Ce qui précède est ce que j'ai compilé. Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Pratique du projet vue-router (tutoriel détaillé)

Comment utiliser la méthode Lodash en Angular ?

À propos de l'utilisation de Material dans Angular2 (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter le plug-in de flux en cascade à l'aide de JSArticle suivant：Comment implémenter le plug-in de flux en cascade à l'aide de JS

Articles Liés

Voir plus