AI 助理
备案控制台登录注册
开发者社区 开发与运维 文章 正文

使用html2pdf.js将HTML页面生成PDF

2021-11-15 2376
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 该功能满足客户的生成表格打印功能，通过前端生成，不需要走后端，直接调起打印机功能。

1.下载js插件

自行搜索下载 html2pdf.bundle.min.js

2.在js中引入

捕获.JPG
这里的路径要改成自己放置的路径

3.设置打印按钮触发

捕获.JPG

js函数部分：
捕获.JPG

4.点击按钮即可调起打印

调整好内边距格式后，直接打印即可

文章标签：
JavaScript
前端开发
关键词：
JavaScript页面
HTML页面
JavaScript HTML
PDF html
PDF页面
我的天呐又出bug啦
+关注
3文章
目录
打赏
0
0
0
0
1
分享
相关文章
疯狂的猿
|
3月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
疯狂的猿
301 77
卓伊凡
|
2月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
68 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
|
3月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
172 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
3月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
80 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
81 34
好奇的菜鸟
|
10月前
|
UED
HTML页面定时刷新指南
HTML页面定时刷新指南
好奇的菜鸟
242 0
橘子红了呐
|
JavaScript 前端开发 监控
html 页面刷新
橘子红了呐
1773 0
二二*一一
|
5月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
263 1
疯狂的猿
|
3月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
124 33
潜意识Java
|
3月前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦，共创未来”为主题，采用动态龙元素展现青春活力与创新精神。页面设计简洁明快，色彩协调，突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明：禁止用于商业活动，可用于比赛和作业等开源场景。最后，作者表达了对五四精神的致敬与传承，强调了青春活力和创造力的重要性，并感谢评委和支持者。 **获奖感言摘录：** “获得这个奖项，对我们团队来说，既是认可也是激励。我们将继续努力，不断优化产品，为用户带来更好的体验，为社会贡献更多价值。”
潜意识Java
55 2

热门文章

最新文章

  • 1
    pdf-craft：PDF秒转Markdown/EPUB！接入DeepSeek轻松生成电子书，自动整理目录、注释和引文
    48
  • 2
    科研论文翻译神器！BabelDOC：开源AI工具让PDF论文秒变双语对照，公式图表全保留
    174
  • 3
    【工具教程】批量PDF和图片OCR识别指定区域文字自动改图片名字，多个区域一次性批量识别改名批量重命名
    22
  • 4
    1.6K star！这个开源文本提取神器，5分钟搞定PDF/图片/Office文档！
    4
  • 5
    这插件太危险了！PDFParser自动扒取PDF每天躺赚300+的暴利搬运术
    18
  • 6
    PDF 转图片，一行代码搞定！批量支持已上线！
    9
  • 7
    Python + 腾讯云，多页PDF发票识别一键搞定！
    7
  • 8
    开源项目：一行代码，批量 PDF 转 Word 轻松搞定！
    16
  • 9
    前端开发必备！Node.js 18.x LTS保姆级安装教程（附国内镜像源配置）
    122
  • 10
    如何在阿里云的linux上搭建Node.js编程环境？
    24
  • 1
    前端基础的讲解-html(3)
    34
  • 2
    前端基础的讲解-html(2)
    24
  • 3
    前端基础的讲解-html(1)
    25
  • 4
    HTML5最新经典俄罗斯方块游戏插件
    49
  • 5
    HTML单页自适应网址导航源码
    66
  • 6
    HTML5实现好看的劳动节网页源码
    85
  • 7
    简约的域名主页HTML源码带暗黑模式
    68
  • 8
    随机二次元背景毛玻璃个人导航HTML源码
    152
  • 9
    HTML单页在线自适应拟态影院源码
    95
  • 10
    HTML5实现好看的中秋节网页源码
    60

    • 相关课程

    更多
  • HTML 入门与实战
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月
    AI助理

    你好，我是AI助理

    可以解答问题、推荐解决方案等