前端实现html转成pdf并下载

最新推荐文章于 2024-05-15 12:45:00 发布

_Boboy

最新推荐文章于 2024-05-15 12:45:00 发布

阅读量1.3w

点赞数 9

文章标签：前端 html canvas pdf

本文链接：https://blog.csdn.net/weixin_43720095/article/details/87358705

版权

html转成pdf,下载（html2canvas 和 jsPDF）

最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）

html2canvas

简介

我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。

使用

使用的API也很简洁，下面代码可以将某个元素渲染成canvas：

html2canvas(element, {
   
    onrendered: function(canvas) {
   
        // canvas is the final rendered <canvas> element
    }
});

通过onrendered方法，可以将生成的canvas进行回调，比如插入到页面中：

html2canvas(element, {
   
    onrendered: function(canvas) {
   
       document.body.appendChild(canvas);
    }
});

做个小例子代码如下，在线展示链接demo1

<html>
  <head>
    <title>html2canvas example</title>
    <style type="text/css">...</style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>one</li>
          ...
        </ul>
      </nav>
    </header>
    <section>
      <aside>
        <h3>it is a title</h3>
        <a href="">Stone Giant</a>
        ...
     </aside>
      <article>
        <img<

最低0.47元/天解锁文章

_Boboy

关注

9
点赞
踩
33

收藏

觉得还不错? 一键收藏
6
评论
前端实现html转成pdf并下载

html转成pdf,下载（html2canvas 和 jsPDF）最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）html2canvas简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。...
复制链接

扫一扫