企业官网建设流程全解析

哈密建设厅网站,网站策划方案,中国网站访问量排行,wordpress 调查问卷如何快速掌握pdfmake#xff1a;从零开始的JavaScript PDF生成终极指南 【免费下载链接】pdfmake Client/server side PDF printing in pure JavaScript 项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake 还在为JavaScript PDF生成工具的复杂配置而烦恼吗#xf…如何快速掌握pdfmake从零开始的JavaScript PDF生成终极指南【免费下载链接】pdfmakeClient/server side PDF printing in pure JavaScript项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake还在为JavaScript PDF生成工具的复杂配置而烦恼吗想快速掌握一个既支持客户端又支持服务端的PDF生成库吗本文将带你从零基础入门pdfmake完成从环境搭建到生成第一个自定义PDF文档的全过程。读完本文你将学会在不同环境下安装和配置pdfmake理解文档定义对象(Document Definition Object)的核心结构使用文本、样式、列表等基础组件构建PDF掌握客户端和服务端两种生成PDF的方法pdfmake简介与核心优势pdfmake是一个基于JavaScript的PDF文档生成库支持客户端和服务端两种使用场景。与其他PDF生成工具相比它具有以下核心优势主要特性纯JavaScript实现无需依赖其他语言或插件丰富的内容支持文本、表格、图片、SVG、列表等灵活的样式系统支持内联样式、命名样式和样式继承跨平台兼容浏览器端直接生成或下载Node.js服务端生成文件完善的文档布局支持页面设置、边距、页眉页脚、分页控制等适用场景使用场景推荐指数优势前端动态报表生成★★★★★无需后端参与减轻服务器负担服务端批量PDF生成★★★★☆可集成到自动化工作流在线文档导出功能★★★★★直接在浏览器生成提升用户体验复杂布局报告★★★★☆强大的表格和样式系统快速安装与环境配置环境要求pdfmake对环境要求非常低只需满足Node.js环境v18.0.0或更高版本服务端使用浏览器支持所有现代浏览器IE不推荐npm或yarn包管理工具安装方式Node.js环境安装# 使用npm安装 npm install pdfmake0.3.0-beta.18 # 使用yarn安装 yarn add pdfmake0.3.0-beta.18浏览器环境引入推荐使用CDN以获得更好的访问速度!-- 引入pdfmake核心库 -- script srchttps://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/pdfmake.min.js/script !-- 引入字体文件 -- script srchttps://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/vfs_fonts.js/script源码安装如果你需要自定义或贡献代码可以从Git仓库克隆源码# 克隆仓库 git clone https://gitcode.com/gh_mirrors/pd/pdfmake cd pdfmake # 安装依赖 npm install # 构建项目 npm run build核心概念文档定义对象(DocDefinition)pdfmake使用文档定义对象(Document Definition Object)来描述PDF的内容和结构。这是一个普通的JavaScript对象包含了PDF的所有信息。基本结构文档定义对象的基本结构如下const docDefinition { // 页面设置 pageSize: A4, // 页面大小 pageOrientation: portrait, // 页面方向 pageMargins: [40, 60, 40, 60], // 页边距 [左, 上, 右, 下] // 样式定义 styles: { header: { fontSize: 18, bold: true }, subheader: { fontSize: 15, bold: true, margin: [0, 10, 0, 5] }, content: { fontSize: 12, margin: [0, 5, 0, 5] } }, // 内容 content: [ { text: 这是标题, style: header }, { text: 这是副标题, style: subheader }, { text: 这是正文内容, style: content } ], // 页眉页脚 header: 这是页眉, footer: (currentPage, pageCount) 第 ${currentPage} 页共 ${pageCount} 页 };快速上手生成第一个PDF服务端(Node.js)实现步骤1创建项目并安装依赖# 创建项目目录 mkdir pdfmake-demo cd pdfmake-demo # 初始化项目 npm init -y # 安装pdfmake npm install pdfmake0.3.0-beta.18步骤2创建基本示例文件创建basic-example.js文件// 引入pdfmake const pdfmake require(pdfmake); // 定义字体 const fonts { Roboto: { normal: node_modules/pdfmake/build/fonts/Roboto/Roboto-Regular.ttf, bold: node_modules/pdfmake/build/fonts/Roboto/Roboto-Medium.ttf, italics: node_modules/pdfmake/build/fonts/Roboto/Roboto-Italic.ttf, bolditalics: node_modules/pdfmake/build/fonts/Roboto/Roboto-MediumItalic.ttf } }; // 创建pdfmake实例 const printer new pdfmake(fonts); // 定义文档内容 const docDefinition { content: [ { text: 2025年销售报告, style: header }, { text: 生成日期: new Date().toLocaleDateString(), style: subheader }, { text: 1. 概述, style: sectionHeader }, { text: 本报告总结了2025年第一季度的销售情况包括各产品线的销售数据、市场份额和客户反馈。, style: content }, { text: 2. 销售数据, style: sectionHeader }, { style: tableExample, table: { headerRows: 1, widths: [60, *, *, *], body: [ [产品类别, 销售额(万元), 同比增长, 目标完成率], [电子产品, 1250, 15%, 108%], [家居用品, 890, 8%, 95%], [服装鞋帽, 620, 22%, 112%], [食品饮料, 480, 5%, 92%] ] } }, { text: 3. 结论, style: sectionHeader }, { text: 总体来看2025年第一季度销售情况良好各产品线均实现正增长其中服装鞋帽类别表现突出。, style: content } ], // 样式定义 styles: { header: { fontSize: 18, bold: true, margin: [0, 0, 0, 10] }, subheader: { fontSize: 14, bold: true, margin: [0, 10, 0, 5], color: #666 }, sectionHeader: { fontSize: 16, bold: true, margin: [0, 15, 0, 5] }, content: { fontSize: 12, margin: [0, 5, 0, 5] }, tableExample: { margin: [0, 10, 0, 15] } } }; // 生成PDF const pdfDoc printer.createPdfKitDocument(docDefinition); pdfDoc.pipe(require(fs).createWriteStream(sales-report.pdf)); pdfDoc.end(); console.log(PDF生成完成);步骤3运行并生成PDFnode basic-example.js运行成功后当前目录下会生成sales-report.pdf文件。浏览器端实现创建browser-example.html文件!DOCTYPE html html head titlepdfmake浏览器端示例/title !-- 引入pdfmake库 -- script srchttps://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/pdfmake.min.js/script !-- 引入字体文件 -- script srchttps://cdn.bootcdn.net/ajax/libs/pdfmake/0.3.0-beta.18/vfs_fonts.js/script /head body button onclickgeneratePdf()生成PDF/button button onclickdownloadPdf()下载PDF/button script // 检查字体是否加载成功 console.log(字体是否可用:, pdfMake.vfs ? 是 : 否); // 文档定义 const docDefinition { content: [ { text: 浏览器端PDF生成示例, style: header }, { text: 当前时间: new Date().toLocaleString(), style: subheader }, { text: 这是一个在浏览器中直接生成的PDF文档。pdfmake支持客户端和服务端两种模式非常灵活。, style: content }, { ul: [ 纯JavaScript实现无需后端支持, 直接在浏览器中生成保护用户数据隐私, 支持下载、打印或在新窗口查看, 丰富的内容和样式控制 ], style: list } ], styles: { header: { fontSize: 20, bold: true, margin: [0, 0, 0, 15] }, subheader: { fontSize: 14, color: #888, margin: [0, 0, 0, 10] }, content: { fontSize: 12, margin: [0, 5, 0, 15] }, list: { margin: [0, 5, 0, 15], fontSize: 12 } } }; // 生成并在新窗口打开PDF function generatePdf() { pdfMake.createPdf(docDefinition).open(); } // 生成并下载PDF function downloadPdf() { pdfMake.createPdf(docDefinition).download(browser-demo.pdf); } /script /body /html直接在浏览器中打开该HTML文件点击按钮即可生成或下载PDF。进阶功能添加图片pdfmake支持添加多种格式的图片包括本地图片和网络图片// 图片示例 const docDefinition { content: [ { text: 图片示例, style: header }, { image: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bxSIVh1YQcYhQnSyIiuimVShChVArtOpgcukXNGlI0wmUuR7Rxl44LmI4q4pK4PfX6z5W3y4z7r5B4P32CFcQmbk5R58v58y6P3X7fH79P7/f3/f3/f3/f3/f3/f3/f3/f3/f3/f3f4A/6HP3ugAAAABJRU5ErkJggg, width: 150, height: 150, alignment: center }, { text: 网络图片, style: subheader }, { image: https://picsum.photos/200/300, width: 200, height: 300, margin: [0, 10, 0, 10] } ] };创建表格pdfmake的表格功能非常强大支持合并单元格、自定义样式和复杂布局// 复杂表格示例 const docDefinition { content: [ { text: 销售数据统计表, style: header }, { table: { // 表头行数 headerRows: 2, // 列宽*表示自动分配剩余空间 widths: [ *, auto, 100, * ], // 表格内容 body: [ [ { text: 产品信息, colSpan: 2, alignment: center, bold: true }, {}, { text: 销售数据, colSpan: 2, alignment: center, bold: true }, {} ], [ { text: 产品名称, bold: true }, { text: 类别, bold: true }, { text: 销售额, bold: true }, { text: 销量, bold: true } ], [ 智能手机, 电子产品, ¥12,500,000, 5000 ], [ 笔记本电脑, 电子产品, ¥8,900,000, 1500 ], [ 运动鞋, 服装, ¥3,200,000, 8000 ], [ 连衣裙, 服装, ¥2,800,000, 6500 ], [ { text: 总计, colSpan: 2, bold: true }, {}, { text: ¥27,400,000, bold: true }, { text: 21000, bold: true } ] ] }, // 表格样式 layout: { fillColor: function(rowIndex, node, columnIndex) { // 表头行颜色 if (rowIndex 2) { return #CCCCCC; } // 交替行颜色 return (rowIndex % 2 0) ? #F5F5F5 : null; } } } ] };自定义页面设置// 自定义页面设置 const docDefinition { // 页面大小支持A4, Letter, Legal等标准尺寸或自定义尺寸[宽度, 高度] pageSize: A4, // 页面方向portrait(纵向)或landscape(横向) pageOrientation: portrait, // 页边距 [左, 上, 右, 下] pageMargins: [40, 60, 40, 60], // 页眉 header: { columns: [ { text: 公司内部文档, style: header }, { text: 机密, style: headerRight } ] }, // 页脚 footer: function(currentPage, pageCount) { return { columns: [ { text: 文档版本: 1.0, style: footer }, { text: 第 ${currentPage} 页共 ${pageCount} 页, style: footer, alignment: right } ] }; } };常见问题解决方案中文字体支持问题pdfmake默认使用Roboto字体如果需要支持中文需要添加中文字体文件const fonts { Roboto: { normal: fonts/Roboto-Regular.ttf, bold: fonts/Roboto-Medium.ttf, italics: fonts/Roboto-Italic.ttf, bolditalics: fonts/Roboto-MediumItalic.ttf }, SimSun: { normal: fonts/simsun.ttf, bold: fonts/simsunbd.ttf, italics: fonts/simsun.ttf, bolditalics: fonts/simsunbd.ttf } }; // 在文档定义中指定使用中文字体 const docDefinition { defaultStyle: { font: SimSun }, content: [ { text: 中文标题, style: header }, { text: 这是中文内容, style: content } ] };性能优化建议对于大量数据表格使用分页显示图片使用适当的分辨率避免过大文件在服务端生成时考虑使用缓存机制学习路线图基础阶段掌握文档定义对象的基本结构和常用组件进阶阶段学习复杂表格、样式继承、动态内容等高级功能实战阶段结合具体业务场景开发完整的PDF生成功能通过本指南的学习你将能够熟练使用pdfmake在各种场景下生成专业的PDF文档。这个强大的JavaScript库将为你提供灵活的PDF生成解决方案无论是前端动态报表还是服务端批量处理都能轻松应对。【免费下载链接】pdfmakeClient/server side PDF printing in pure JavaScript项目地址: https://gitcode.com/gh_mirrors/pd/pdfmake创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考