AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

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

1.下载js插件

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

2.在js中引入

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

3.设置打印按钮触发

捕获.JPG

js函数部分：
捕获.JPG

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

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

文章标签：
JavaScript
前端开发
关键词：
JavaScript页面
PDF页面
HTML页面
JavaScript HTML
PDF html
我的天呐又出bug啦
目录
相关文章
34789737
|
8月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
在React中结合Ant Design与媒体查询，通过less变量和响应式断点动态调整`@font-size-base`，实现多分辨率下字体自适应，提升跨设备体验。
34789737
443 2
游客ib7xsk7hcucuo
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
3055 4
卓伊凡
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
863 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
卓伊凡
659 7
【02】仿站技术之python技术，看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载（简单）-ios苹果plist下载（稍微麻烦一丢丢）-优雅草卓伊凡
卓伊凡
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
725 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
1212 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
游客dng4gjyb342he
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
游客dng4gjyb342he
447 0
一个幽默的程序员
|
存储 JSON API
如何将 Swagger 文档导出为 PDF 文件
你会发现自己可能需要将 Swagger 文档导出为 PDF 或文件，以便于共享和存档。在这篇博文中，我们将指导你完成将 Swagger 文档导出为 PDF 格式的过程。
一个幽默的程序员
1256 0
老乡别走
|
10月前
|
C#
【PDF提取内容改名】批量提取PDF指定区域内容重命名PDF文件，PDF自动提取内容命名的方案和详细步骤
本工具可批量提取PDF中的合同编号、日期、发票号等关键信息，支持PDF自定义区域提取并自动重命名文件，适用于合同管理、发票处理、文档归档和数据录入场景。基于iTextSharp库实现，提供完整代码示例与百度、腾讯网盘下载链接，助力高效处理PDF文档。
老乡别走
1325 40
鱼的爱情看不出泪水
|
10月前
|
编译器 Python
如何利用Python批量重命名PDF文件
本文介绍了如何使用Python提取PDF内容并用于文件重命名。通过安装Python环境、PyCharm编译器及Jupyter Notebook，结合tabula库实现PDF数据读取与处理，并提供代码示例与参考文献。
鱼的爱情看不出泪水
422 1

热门文章

最新文章

  • 1
    在Html5中与服务器交互
  • 2
    html5指南 -- 7.geolocation结合google maps一例
  • 3
    HTML核心标签之表格标签(二)
  • 4
    HTML5实践 -- 如何使用css3丰富我们的图片样式
  • 5
    web前端html写一个动态中秋明月！祝福大家中秋快乐！
  • 6
    第87天：HTML5中新选择器querySelector的使用
  • 7
    Html游戏开发-画图
  • 8
    html5-俄罗斯方块分析
  • 9
    HTML 5的革新：结构之美
  • 10
    html编辑及JS脚本过滤(转载)
  • 1
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
    275
  • 2
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    4539
  • 3
    百宝箱开放平台 ✖️ Node.js SDK
    418
  • 4
    电脑管控软件的进程优先级调度：Node.js 红黑树算法
    358
  • 5
    企业上网监控系统的恶意 URL 过滤 Node.js 布隆过滤器算法
    408
  • 6
    JavaScript进阶挑战：巩固核心知识点
    255
  • 7
    js实现promise常用场景使用示例
    396
  • 8
    基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
    458
  • 9
    Nest.js控制器深度解析：路由与请求处理的高级特性
    483
  • 10
    js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
    443

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎