首页 > 其他分享 >vue2+html2canvas+jspdf 导出网页

vue2+html2canvas+jspdf 导出网页

时间:2024-09-03 15:14:44浏览次数:13  
标签:jspdf canvas const html2canvas vue2 PDF leftHeight pdf 页面

` async handlePreview() {
const pdf = await this.exportToPdf()
// 使用浏览器预览 PDF-安全策略有缺陷
const pdfDataURI = pdf.output('datauristring')
window.open(pdfDataURI, '_blank','location=no');
},
async handleDown() {
const pdf = await this.exportToPdf()
// 下载 PDF
console.log('pdf', pdf)
pdf.save('申请单.pdf')
},
exportToPdf() {
const element = document.getElementsByClassName('dialog-box')[0] // 你想要导出为 PDF 的元素
console.log('element', element)
const options = {
scale: 1, // 提高分辨率
useCORS: true, // 允许跨域请求
}
return new Promise((resolve, reject) => {
html2canvas(element, options).then((canvas) => {
const contentWidth = canvas.width
const contentHeight = canvas.height

      // 一页 PDF 显示 HTML 页面生成的 canvas 高度;
      const pageHeight = (contentWidth / 592.28) * 841.89
      // 未生成 PDF 的 HTML 页面高度
      let leftHeight = contentHeight
      // 页面偏移
      let position = 0
      // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28
      const imgHeight = (592.28 / contentWidth) * contentHeight

      const pageData = canvas.toDataURL('image/jpeg', 1.0)

      const pdf = new jsPDF('', 'pt', 'a4')
      // 设置边距
      // pdf.setMargins(15, 15, 15, 15)

      // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围,无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        // 分页
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      // return pdf
      resolve(pdf)
    })
  }).catch((error) => {
    console.log('error', error)
    // reject(error)
  })
},`

标签:jspdf,canvas,const,html2canvas,vue2,PDF,leftHeight,pdf,页面
From: https://www.cnblogs.com/33shan/p/18394669

相关文章

  • Vue2 - 最新实现百度地图3D立体感视角教程及示例代码,利用WebGL实现3d百度地图详细流程
    前言如果您需要Vue3版本,请访问在vue2|nuxt2项目开发中,详解实现“安装引入百度地图webgl技术,实现3d地图教程”将百度地图变成3D视角效果,让百度地图平面2D视图和3D立体视图进行切换渲染显示,vue如何实现百度地图的三维立体地图效果,解决WebGL引入报错或无效、3D地图......
  • 前端宝典二十五:vue2高阶用法mixin、transition、slot
    本文主要探讨vue2中几个高阶的用法:mixin、transition、slot一、mixin在Vue中,mixin(混入)是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象,并将其混入到不同的组件中。1、使用方法创建一个混入对象:constmyMixin={data(){return{......
  • vue2项目中使用webworker(二):导出Excel
    需求有的时候我们导出的数据量很大,如果在主进程中操作的话可能会导致页面卡顿的问题代码App.vue<template><divclass="app"><button@click="exportExcel">导出Excel</button></div></template><script>importExcelWorkerfrom......
  • Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区
    SPASPA(SinglePageApplication,单页面应用)是一种Web应用程序架构,其核心特点是在用户与应用程序交互时,不重新加载整个页面,而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析,包括其优点和缺点:SPA的优点更好的用户体验:SPA无需重新加载......
  • vue2项目中使用webworker(一):发送网络请求
    背景有的时候我们需要向后端发送多个网络请求,如果全部在主线程中操作的话页面会变得非常卡顿,我们可以使用webwoker来发送网络请求,一旦服务响应结果,我们再从子线程给主线程发送消息步骤默认情况下vue2是不支持webwoker。安装worker-loadernpmi-Dworker-loadervue.conf......
  • vue使用html2canvas将页面dom生成图片,解决页面中带有图片导出
    安装npm installhtml2canvas引入importhtml2canvas from 'html2canvas'使用this.$refs.canvasToPic是div的dom,只要在这个div中的区域都可以生成图片1this.$nextTick(()=>{2html2canvas(this.$refs.canvasToPic,{useCORS:true,logging:true}).......
  • Vue2实现应用添加水印的功能
    需求有的情况,我们需要给我们的网页添加水印。我们可以使用第三方库WatermarkDesign。官方地址:https://watermark-design.github.io/watermark/zh/效果示例代码入口文件main.jsimportWatermarkDesignfrom'@watermark-design/vue';Vue.use(WatermarkDesign)vue容器App......
  • Vue2中的事件修饰符 用于处理DOM事件的触发方式
    一、.stop1.功能:阻止事件冒泡,即停止事件向上传播到父元素。2.代码演示:<div@click="parentClick"> <[email protected]="childClick">Clickme</button></div>二、.prevent1.功能:阻止默认行为,例如阻止表单提交或链接跳转。2.代码演示:<[email protected]="su......
  • vue2的el-select虚拟下拉
    说明vue3的的el-select,ElementPlus封装了虚拟下拉的写法,但是有些vue2版本的el-select却没办法用虚拟下拉。如果下拉列表数据量大的话,很导致极度卡顿。那我们就自己封装一个吧代码components下新建elselectV2文件夹,新建两个文件:elOptionNode.vue和VirtualSelect.vue。el......
  • vue2调用高德地图api使用详细案例
      我是主要做java开发的,前台需要使用高德地图集成vue2进行页面展示,所以在第三个案例中,开始的经纬度和结束的经纬度都进行了变量定义且进行了格式优化,如需要后台调用参数,则只需要修改变量的值进行赋值,则可以正常进行开始点和结束点的路程规划以及调用,前台具体的行程信......