javascript - 将 Html Css 转换为 Pdf 并下载,与设计相同

标签 javascript html css

我正在尝试从 html 和 css 文件中下载 pdf,html/css 页面设计和 pdf 应该完全相同。

下面是我的javascipt!

function generatePDF2() {
    var doc = new jsPDF();

    var elementHTML = $("#contnet").html();
    var specialElementHandlers = {
      "#elementH": function(element, renderer) {
        return true;
      }
    };
    doc.fromHTML(elementHTML, 15, 15, {
      width: 170,
      elementHandlers: specialElementHandlers
    });

    // Save the PDF
    doc.save("sample-document.pdf");
  }

HTML

 <div id="contnet">
  <!-- HTML contnet goes here -->
  <h1>Lorem Ipsum</h1>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolor dolorum quos quaerat consequatur doloribus mollitia distinctio eius voluptate excepturi voluptatibus nihil officia, nam animi non perferendis, unde accusantium ut.
</div>

<div id="elementH"></div>

<button onclick="generatePDF2();">Generate2</button>

不幸的是,我发现这个解决方案不起作用!

这些是我加载的标题

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

最佳答案

我认为您缺少 HTML2Canvas 库(js 文件)。 <强> download html2canvas.min.js 并将其添加为

<script type="text/javascript" src="html2canvas.min.js"></script>

关于javascript - 将 Html Css 转换为 Pdf 并下载,与设计相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58200605/

相关文章:

javascript - 使用 jQuery 从父元素中删除类?

javascript - 如何将 SP.CamlQuery 的响应正文大小减小到大型 SharePoint 列表?

javascript - 在 backstretch 上叠加内容

javascript - 不显示 HTML 下拉菜单文本

php - 动态下拉列表-从mysql获取值

css - 如何在 Ionic 中进行 3 个网格设计,其中左侧 1 个网格是 2 个网格大小的两倍(右侧一个在另一个网格之上)示例

html - 如何隐藏可编辑内容的可调整大小的边框?

javascript - 使用 Javascript 从外部页面获取 innerhtml

html - Bootstrap 3 并排容器

html -::after 中与 div 中相同的线性渐变背景