镇江网站建设zjmfkj,做网站广告中敏感词会涉及到工商,网站开发的英文参考文献,江苏建设银行上班时间需求#xff1a;html页面转换pdf#xff0c;页面有多个模块#xff0c;页面中有文本、echarts、表格等模块#xff0c;一个模块占一页#xff0c;因为模块高度不够#xff0c;所以需要垂直居中 通过html2canvas和jspdf实现#xff0c;html2canvas用于将页面元素生成canv…需求html页面转换pdf页面有多个模块页面中有文本、echarts、表格等模块一个模块占一页因为模块高度不够所以需要垂直居中 通过html2canvas和jspdf实现html2canvas用于将页面元素生成canvasjspdf用于将页面元素导出pdf 效果 以下代码可以直接运行背景图需要自行加一下 注意点背景图片不支持跨域图片非要使用跨域图片。可以通过js转成base64使用base64设置背景图片 图片需要在服务器端才能正常导出可以使用vscode的live-server插件
!DOCTYPE html
html langenheadmeta charsetUTF-8 /metahttp-equivX-UA-CompatiblecontentIEedge /metanameviewportcontentwidthdevice-width, initial-scale1.0 /script srchttps://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js/scripttitleDocument/title/headstyle* {margin: 0;padding: 0;}.module1,.module2 {background-image: url(../bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;height: 100vh;}h1 {text-align: center;padding-top: 30vh;margin-bottom: 10vh;font-size: 100px;letter-spacing: 10px;font-weight: bold;}p {text-align: center;margin-top: 30px;font-size: 50px;font-weight: bold;letter-spacing: 10px;}button {display: block;margin: 0 auto;margin-top: 5vh;width: 20vh;height: 10vh;outline: none;}.module2 h1 {padding-top: 30px;font-size: 80px;margin-bottom: 40px;}.module2 p {margin-top: 10px;font-size: 40px;}.echarts {width: 100%;height: 70vh;}table {table-layout: fixed;word-break: break-all;width: 99%;margin: 0 auto;}table th {padding: 10px 20px;text-align: center;}table td {padding: 10px 20px;text-align: center;}.one {width: 300px;}/stylebodydiv classmodule1 moduleh1你好世界/h1p2月3日/pbutton onclickdownloadPDf()下载pdf/button/divdiv classmodule2 moduleh1echarts/h1div classecharts/div/divdiv classmodule2 moduleh1文本/h1p本网站上的图像不能用于以下目的。如有违反将承担损害赔偿责任敬请遵守。 1、不能用图像本身或处理过的图像的二次分发 2、不能用作服务标记或商标 3、不能使用违法、虚假、诽谤、侵权等违反公序良俗的内容。 4、不能用作色情图片 5、不能用于成人媒体、娱乐相关包括歌舞俱乐部等和约会服务6、不能用于互联网异性恋介绍业务 7、不能用在消费金融中的应用 8、不能欺骗例如使用人的照片通过各种软件渠道去骗取任性与钱财 9、不能用照片损坏国家形象和利益/p/divdiv classmodule2 moduleh1表格/h1tableborder1cellspacing0cellpadding0border1trth classone故障统计/thth1月27日/thth1月28日/thth1月29日/thth1月30日/thth1月31日/thth2月1日/thth2月2日/thth周累计/th/trtrtd classone风险/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/td/trtrtd classone服务/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/tdtd0/td/tr/table/div/bodyscriptconst myChart echarts.init(document.querySelector(.echarts))// 绘制图表myChart.setOption({xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})const jsPDF jspdf.jsPDFconst downloadPDf async dom {// 对于一些不想显示在pdf上的元素设置displaynone比如隐藏所有buttonconst buttons document.querySelectorAll(button)buttons.forEach(item {item.style.display none})// 获取所有需要生成pdf的模块const modules document.querySelectorAll(.module)if (!modules.length) return// a4纸固定宽高const a4Width 595.28const a4Height 841.89const pdf new jsPDF(p, pt)// 生成所有pdf页async function setPdfPage() {for (let i 0; i modules.length; i) {const item modules[i]const canvas await html2canvas(item)const contentWidth canvas.widthconst contentHeight canvas.heightconst pageData canvas.toDataURL(image/jpeg, 1) // 第二个参数为图片质量1为最高质量let imgHeight (a4Width / contentWidth) * contentHeight // 根据a4纸比例计算出图片的高度const marginY (a4Height - imgHeight) / 2 // 计算出图片的上下边距// 第三个参数图片x轴位置第四个参数图片y轴位置第五个参数图片宽度第六个参数图片高度pdf.addImage(pageData, JPEG, 0, marginY 0 ? marginY : 0, a4Width, imgHeight a4Height ? a4Height : imgHeight)// 最后一个模块不需要再新增空白页if (i modules.length - 1) {pdf.addPage()}}}await setPdfPage()pdf.save(TestReport.pdf) // 导出pdf// 还原元素buttons.forEach(item {item.style.display block})}/script
/html
