vue3实现导出pdf、png功能

news/2024/10/30 17:21:05/

1、安装html2canvas 、jspdf包

npm install --save html2canvas   // 可以将dom元素转为一张图片
npm install --save jspdf   // 导出为PDF格式

2、vue组件中引用,代码如下:

<template><div class="content"><a-button @click="exportPNG" size="small" type="primary">导出PNG</a-button><a-button @click="exportPDF" size="small" type="primary">导出PDF</a-button><div id="main-charts">需要截取的内容区域</div></div>
</template>

3、导出png

<script lang="ts" setup>// 引入插件import html2canvas from 'html2canvas';import jsPDF from 'jspdf';// 导出pngconst exportPNG = () => {const ele: HTMLElement | null = document.getElementById('main-charts');html2canvas(ele as HTMLElement).then((canvas: any) => {const contentWidth = canvas.width;const contentHeight = canvas.height;const ctx: any = canvas.getContext('2d');// 添加水印ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.rotate((25 * Math.PI) / 180);ctx.font = '20px Microsoft Yahei';ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';for (let i = contentWidth * -1; i < contentWidth; i += 240) {for (let j = contentHeight * -1; j < contentHeight; j += 100) {// 填充文字,x 间距, y 间距ctx.fillText('水印名', i, j);}}const imgUrl = canvas.toDataURL('image/png');const tempLink = document.createElement('a'); // 创建一个a标签tempLink.style.display = 'none';tempLink.href = imgUrl;tempLink.setAttribute('download', '文件名'); // 给a标签添加下载属性if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank');}document.body.appendChild(tempLink); // 将a标签添加到body当中tempLink.click(); // 启动下载document.body.removeChild(tempLink); // 下载完毕删除a标签window.URL.revokeObjectURL(imgUrl);})}
</script>

4、导出pdf

<script lang="ts" setup>// 引入插件import html2canvas from 'html2canvas';import jsPDF from 'jspdf';const exportPDF = () => {const ele: HTMLElement | null = document.getElementById('main-charts');html2canvas(ele as HTMLElement, {dpi: 96, // 分辨率scale: 2, // 设置缩放useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,// backgroundColor:'#ffffff',这样背景还是黑的bgcolor: '#ffffff', // 应该这样写logging: false, // 打印日志用的 可以不加默认为false}).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 = (595.28 / contentWidth) * contentHeight;const ctx: any = canvas.getContext('2d');// 添加水印ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.rotate((25 * Math.PI) / 180);ctx.font = '20px Microsoft Yahei';ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';for (let i = contentWidth * -1; i < contentWidth; i += 240) {for (let j = contentHeight * -1; j < contentHeight; j += 100) {// 填充文字,x 间距, y 间距ctx.fillText('水印名', i, j);}}const pageData = canvas.toDataURL('image/jpeg', 1.0);const pdf = new jsPDF('', 'pt', 'a4');if (leftHeight < pageHeight) {// 在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;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();}}}// 可动态生成pdf.save(`文件名.pdf`);});}
</script>


http://www.ppmy.cn/news/437124.html

相关文章

Vue pdf 文件(文件流)预览,下载,视频下载

pdf文件预览 // 预览 <iframe :src"pdfUrl" frameborder"0" style"width: 100%; height:900px"></iframe>//window.open(/pdf/web/viewer.html?file path);//path是文件的全路径地址 下载pdf.js插件 https://mozilla.github.io/pd…

前端(vue)导出pdf

纯前端导出 pdf 实现方法如下&#xff1a; 1. 安装 html2pdf、jspdf npm install html2canvas jspdf --save 2. 项目 utils 文件夹中新建一个 html2pdf.js&#xff08;文件名称自拟&#xff09;文件&#xff0c;内容如下&#xff1a; import jsPDF from jspdf import html2…

Vue导出PDF

一. 使用vue-to-pdf npm i vue-to-pdf --save引入: import vueToPdf from vue-to-pdf; Vue.use(vueToPdf);使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用 this. P D F S a v e ( t h i s . PDFSave(this. PDFSave(this.refs[‘…

后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出(方案二:puppeteer nodejs express 实现)

近期公司提出了一个新需求&#xff0c;希望将用户在前端填写的一系列数据生成一个报告给用户&#xff0c;报告大概有8个表格&#xff0c;表格涉及到分页。于是查询了资料&#xff0c;做出以下两个方案。 方案一请点击这里 方案二 puppeteer 生成页面的截图和PDF puppeteer官…

vue2.0将页面html导出为pdf格式文档

npm i html2canvasnpm i jspdf创建一个js文件 // 页面导出为pdf格式 //title表示为下载的标题&#xff0c;html表示document.querySelector(#myPrintHtml) import html2Canvas from html2canvas import JsPDF from jspdfconst htmlPdf {getPdf(title, html) {html2Canvas(htm…

vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载,以及uniapp中文件包(文件流)的下载处理

方法一&#xff1a;a标签 // 下载 const downLoad (url: string, name: string,type:string) > {var xhr new XMLHttpRequest();xhr.open(GET, url, true);xhr.responseType arraybuffer; // 返回类型blobxhr.onload function () {if (xhr.readyState 4 && xh…

Vue中将页面导出为PDF

Vue中将页面导出为PDF 实现思路第一步第二步第三步第四步全部代码展示 实现思路 在Vue中实际是把页面利用canvas转换成图片&#xff0c;然后再用图片的base64码转成PDF&#xff0c;这里就使用到了两个插件html2canvas和jspdf 第一步 安装两个插件 npm install --save html…

爱奇艺2020官方下载_爱奇艺视频如何上传

软件是否好用&#xff0c;还得大家下载爱奇艺安装才知道。本文分享爱奇艺2020官方下载_爱奇艺视频如何上传。爱奇艺电影频道拥有大量高清在线电影资源&#xff0c;热门高清电影、好评电影、电影预告都可以在线观看&#xff0c;不去电影院也能看好电影&#xff0c;而且是看所有电…