JS之 HTML生成PDF并下载

最新推荐文章于 2024-04-17 16:37:20 发布

祁娥安

最新推荐文章于 2024-04-17 16:37:20 发布

阅读量854

点赞数 1

分类专栏： JavaScript 文章标签： js html javascript

本文链接：https://blog.csdn.net/weixin_45794138/article/details/104883098

版权

今天跟大家分享下JS之HTML生成PDF并下载的知识。

1 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 src="./Stone.png">
        <h2>Stone Giant</h2>
        <p>Coming ... </p>
        <p>以一团石头...</p>
      <

最低0.47元/天解锁文章

祁娥安

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS之 HTML生成PDF并下载

今天跟大家分享下JS之HTML生成PDF并下载的知识。1 html2canvas简介我们可以直接在浏览器端使用html2canvas，对整个或局部页面进行“截图”。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但...
复制链接

扫一扫