vue2如何将页面生成 pdf 导出 html2Canvas + jspdf

1.引入两个依赖

npm i html2canvas
npm i jspdf

2.在utils文件夹下新建html2pdf.js文件 

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf'

export const htmlToPDF = async (htmlId, title = "报表", bgColor = "#fff") => {

  let pdfDom = document.getElementById(htmlId)

  pdfDom.style.padding = '0 10px !important'

  const A4Width = 595.28;

  const A4Height = 841.89;

  let canvas = await html2canvas(pdfDom, {

    scale: 2,

    useCORS: true,

    backgroundColor: bgColor,

  });

  let pageHeight = (canvas.width / A4Width) * A4Height;

  let leftHeight = canvas.height;

  let position = 0;

  let imgWidth = A4Width;

  let imgHeight = (A4Width / canvas.width) * canvas.height;

  /*

   根据自身业务需求  是否在此处键入下方水印代码

  */

  const ctx = canvas.getContext('2d');

  ctx.textAlign = 'center';

  ctx.textBaseline = 'middle';

  ctx.rotate((20 * Math.PI) / 180);

  ctx.font = '20px Microsoft Yahei';

  ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';

  for (let i = canvas.width * -1; i < canvas.width; i += 240) {

    for (let j = canvas.height * -1; j < canvas.height; j += 200) {

      // 填充文字,x 间距, y 间距

      ctx.fillText('水印名', i, j);

    }

  }

  let pageData = canvas.toDataURL("image/jpeg", 1.0);

  let PDF = new jsPDF("p", 'pt', 'a4');

  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 -= A4Height;

      if (leftHeight > 0) PDF.addPage();

    }

  }

  PDF.save(title + ".pdf");

}

3.在目标页面引入方法即可 

import { htmlToPDF } from '@/utils/html2pdf'

4.使用

<template><div class="jsPdf" id="test-id"><video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video><video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video><video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video><div class="text"><h1>封神:朝歌风云</h1><div class="text_p"><p>《封神》第一部讲述了姜子牙、申公豹、元始天尊等一众神仙,在商王殷寿的妄想和谋划下,最终联合揭露并封印百足天君的故事。在这部电影中,每个角色都有自己的故事和情感线,铺陈了复杂而丰富的剧情,让观众充满瞬间的悬念和追求真相的驱动力。同时,电影人物造型精致独特,场景布局细致入微,实现了东方奇幻风格的完美呈现。</p><p>《封神第一部:朝歌风云》讲述了狐狸精苏妲己的魂魄进入王宫,商纣王受其迷惑,杀妻灭子,炮烙谏言的臣子,残害四方诸侯,建摘星楼。西伯侯姬昌先被囚,后逃回西岐的故事。</p><p>狐狸精吸食苏妲己的魂魄进入王宫。商纣王受其迷惑,杀妻灭子,炮烙谏言的臣子,残害四方诸侯。建摘星楼。西伯侯姬昌先被囚,后逃回西岐。</p><p>《封神三部曲》为了还原历史记载中商王朝气势磅礴的朝歌城,剧组专门在青岛灵山搭建了一座占地800亩土地,总计3万平米的影棚。外景片场占地五百亩,场地全部依靠剧组自行搭建。围拢在片场周遭的蓝幕。剧组在片场改装了数台挖掘机,去掉挖斗加装上拍戏用的巨幅蓝幕。挖掘机本身可自走,底盘重也扛得住青岛当地的海风。如此以来按照拍摄计划移步换景。在内景场地中,其中龙德殿占地六千平米,剧组在棚内耗费5个月搭建了自己的灯光系统,灯光可以照到任何有需要的区域。</p><p>《封神三部曲》内景中的木雕建筑和青铜器摆件颇见剧组的匠心,所有道具是原样复刻历史上商周的器皿,而是剧组参考商周文化元素再度创新制作的。工序是先由毕业于清华美院、中央美术学院等高等艺术院校的泥雕艺术家根据美术团队的设计稿做出泥雕,再由安徽歙县和浙江东阳的木雕师进行1:1大小的木雕打样,然后进行大批量玻璃钢、发泡翻制,最终使用贴金的方式,对雕件进行效果处理。影片中版婴儿雷震子,这个角色是由机械控制的,乌尔善导演在该片中引入了一些跨界人才,因为之前的电影行业中,能够把雕塑艺术、机械、电脑融合在一起的艺术家比较稀缺。而设计雷震子这个角色的是一个小姑娘,学的专业是机械物理,她在雷震子的身体里面装了很多机关,用6个遥控按钮来完成一些操作,睁眼闭眼、哭笑,脸上所有的表情都可以做。雷震子的皮肤触感就跟真人一样,摸上去的时候感觉就跟摸一个婴儿一样。而长大之后的雷震子,会做成一个虚拟角色,涉及大量特效。洋溢着唯美的诗意风格,渗透着深沉的人文关怀。整部叙事流畅,没有拖泥带水之感,镜头与镜头,场景与场景之间衔接的自然灵活,以上就是关于电影《封神》第一部剧情介绍的全部内容了,觉得不错的话可以继续关注古宫历史网后续的精彩内容。</p></div></div><el-button type="success" data-html2canvas-ignore="true" @click="btnClick('test-id', '测试页面')">导出(使用html2Canvas + jspdf)</el-button></div>
</template>
<script>
import { htmlToPDF } from '@/utils/html2pdf'
export default {data () {return {videoUrl: "/video/26.mp4",}},mounted () { },methods: {btnClick (id, title) {htmlToPDF(id, title)}},
}
</script>
<style lang="scss" scoped>
.jsPdf {width: 100%;position: relative;video {width: 100%;display: block;}.text {height: 100%;color: #000;/* 设置文字颜色 */background: #fff;position: absolute;inset: 0;/* 混合模式 */mix-blend-mode: screen; text-align: center;h1 {font-size: 150px;font-weight: 600;margin:100px;}.text_p{width: 80%;margin: 0 auto;text-align: left;p{font-size: 30px;text-indent:24px;line-height: 2;}}}.el-button {position: absolute;top: 20px;left: 20px;}
}</style>

5.html2Canvas隐藏指定元素 

隐藏指定元素:

data-html2canvas-ignore="true"

<div class="detail" data-html2canvas-ignore="true">
    <el-button type="primary" size="small" @click="viewDetail(item)">查看详情</el-button>
</div>

6.效果 

页面效果

生成pdf效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6481.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode每日一题合集】2023.7.17-2023.7.23(离线算法 环形子数组的最大和 接雨水)

文章目录 415. 字符串相加&#xff08;高精度计算、大数运算&#xff09;1851. 包含每个查询的最小区间⭐⭐⭐⭐⭐解法1——按区间长度排序 离线询问 并查集解法2——离线算法 优先队列 874. 模拟行走机器人&#xff08;哈希表 方向数组&#xff09;918. 环形子数组的最大和…

sentinel深入讲解流量控制/熔断降级

文章目录 sentinelsentinel介绍重要的核心概念引入依赖限流的规则熔断规则yaml 项目配置使用注解 SentinelResource讲解类的静态方法 sentinel sentinel介绍 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构…

【深度学习之YOLO8】环境部署

目录 一、确定版本CUDA toolkit、cuDNN版本Python、PyTorch版本 二、安装Python下载环境变量验证安装 三、安装Anaconda安装环境变量验证安装创建conda虚拟环境常用命令 四、安装CUDA toolkit下载环境变量验证安装 五、配置cuDNN下载 六、安装PyTorch(torchtorchversiontorchau…

华为、阿里巴巴、字节跳动 100+ Python 面试问题总结(五)

系列文章目录 个人简介&#xff1a;机电专业在读研究生&#xff0c;CSDN内容合伙人&#xff0c;博主个人首页 Python面试专栏&#xff1a;《Python面试》此专栏面向准备面试的2024届毕业生。欢迎阅读&#xff0c;一起进步&#xff01;&#x1f31f;&#x1f31f;&#x1f31f; …

RUST腐蚀基因种植

RUST腐蚀基因种植 试验地址:www.xiaocao.cloud RUST基因: RUST基因计算器&#xff0c;腐蚀基因计算器&#xff0c;前后端分离架构&#xff0c;前端目录/resouce/ui/rust&#xff0c;欢迎大佬评价&#xff0c;

算法笔记(java)——回溯篇

回溯算法解决问题最有规律性&#xff0c;借用一下卡哥的图&#xff1a; 只要遇到上述问题就可以考虑使用回溯&#xff0c;回溯法的效率并不高&#xff0c;是一种暴力解法&#xff0c;其代码是嵌套在for循环中的递归&#xff0c;用来解决暴力算法解决不了的问题&#xff0c;即…

Tensorflow无人车使用移动端的SSD(单发多框检测)来识别物体及Graph的认识

环境是树莓派3B&#xff0c;当然这里安装tensorflow并不是一定要在树莓派环境&#xff0c;只需要是ARM架构就行&#xff0c;也就是目前市场上绝大部分的嵌入式系统都是用这套精简指令集。 在电脑端的检测&#xff0c;有兴趣的可以查阅SSD(Single Shot MultiBox Detector)系列&a…

19 QListWidget控件

Tips: 对于列表式数据可以使用QStringList进行左移一块输入。 代码&#xff1a; //listWidget使用 // QListWidgetItem * item new QListWidgetItem("锄禾日当午"); // QListWidgetItem * item2 new QListWidgetItem("汗滴禾下土"); // ui->…

十、正则表达式详解:掌握强大的文本处理工具(二)

文章目录 &#x1f340;多字符匹配&#x1f340;匹配规则的代替&#x1f340;特殊的匹配&#x1f340;特殊的匹配plus&#x1f340;总结 &#x1f340;多字符匹配 星号&#xff08;*&#xff09;&#xff1a;匹配0个或者多个字符 import retext 111-222-333 result re.matc…

苹果的Apple GPT要来了?

据外媒消息&#xff0c;苹果正在内部开发类 ChatGPT 的产品&#xff0c;与微软、OpenAI、谷歌、Meta 等科技巨头在生成式 AI 赛道展开竞争。该消息使得苹果股价上涨了 2%。据苹果工程师透露&#xff0c;苹果在内部构建了代号为“Ajax”的大语言模型开发框架&#xff0c;并构建了…

Unity自定义后处理——Bloom效果

大家好&#xff0c;我是阿赵。   继续介绍屏幕后处理效果&#xff0c;这一期讲一下Bloom效果。 一、Bloom效果介绍 还是拿这个模型作为背景。 Bloom效果&#xff0c;就是一种全屏泛光的效果&#xff0c;让模型和特效有一种真的在发光的感觉。 根据参数不一样&#xff0c;可…

Packet Tracer – 实施静态 NAT 和动态 NAT

Packet Tracer – 实施静态 NAT 和动态 NAT 拓扑图 目标 第 1 部分&#xff1a;利用 PAT 配置动态 NAT 第 2 部分&#xff1a;配置静态 NAT 第 3 部分&#xff1a;验证 NAT 实施 第 1 部分&#xff1a; 利用 PAT 配置动态 NAT 步骤 1&#xff1a; 配置允许用于 NAT …

【基于CentOS 7 的iscsi服务】

目录 一、概述 1.简述 2.作用 3. iscsi 4.相关名称 二、使用步骤 - 构建iscsi服务 1.使用targetcli工具进入到iscsi服务器端管理界面 2.实现步骤 2.1 服务器端 2.2 客户端 2.2.1 安装软件 2.2.2 在认证文件中生成iqn编号 2.2.3 开启客户端服务 2.2.4 查找可用的i…

AJAX-day03-AJAX进阶

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 同步代码和异步代码 回调函数地狱 Promise - 链式调用 Promise 链式应用 async函数和await async函…

Stable Diffusion入门笔记(自用)

学习视频&#xff1a;20分钟搞懂Prompt与参数设置&#xff0c;你的AI绘画“咒语”学明白了吗&#xff1f; | 零基础入门Stable Diffusion保姆级新手教程 | Prompt关键词教学_哔哩哔哩_bilibili 1.图片提示词模板 2.权重&#xff08;提示词&#xff09; 无数字 (flower)//花的…

MQTT网关 5G物联网网关 PLC控制工业网关

MQTT网关&#xff0c;两个以上的节点之间通信的新型网关&#xff0c;网络节点之间通过互连来实现双向通信。支持PLC协议转MQTT&#xff0c;实现plc数据采集上云&#xff0c;物联网云平台对接&#xff0c;广泛应用于工业自动化plc远程监测控制。 计讯物联5G MQTT物联网网关TG463…

如何解决 Git 合并冲突

在遇到合并冲突时&#xff0c;请不要惊慌。通过一些娴熟的技巧协商&#xff0c;你可以解决任何冲突。 假设你和我正在共同编辑同一个名称为 index.html 的文件。我对文件进行了修改&#xff0c;进行了提交&#xff0c;并将更改推送到 Git 远程仓库。你也对同一个文件进行了修改…

酷雷曼无人机技能培训考试圆满举办

2023年7月18日、19日&#xff0c;以“向云端起航&#xff0c;让技术落地”为主题的酷雷曼无人机技能提升培训会在酷雷曼北京运营中心隆重举行&#xff0c;来自全国各地的众多合作商参加了本次培训&#xff0c;通过系统、全面的学习成功取得了专业无人机飞行员执照&#xff0c;为…

BEVDet 论文解读

BEVDet: High-Performance Multi-Camera 3D Object Detection in Bird-Eye-View 作者单位 PhiGent Robotics 目的 2D 的视觉感知在过去的几年里有了急速的发展&#xff0c;涌现出一些优秀的范式工作&#xff0c;这些工作有较高的性能&#xff0c;可扩展性&#xff0c;以及多…

【数学建模】--典型相关分析

典型相关分析&#xff08;Canonical Correlation analysis&#xff09;研究两组变量&#xff08;每组变量中都可能有多个指标&#xff09;之间相关关系的一种多元统计方法。它能够揭示出两组变量之间的内在联系。 例子&#xff1a; 典型相关分析定义&#xff1a; 列题分析&…