vue项目纯前端实现导出pdf文件

1、下载插件

npm install html2canvas
npm install jspdf

2、创建htmlToPdf.js,地址:src/utils/htmlToPdf.js

import html2Canvas from 'html2Canvas'  
import JsPDF from 'jspdf'  export default {  install(Vue, options) {  Vue.prototype.getPdfFromHtml = function (eleId, pdfFileName, hide) {  // 确保传入了正确的元素ID  const ele = document.getElementById(eleId);  if (!ele) {  console.error('No element found with ID:', eleId);  return;  }  pdfFileName = pdfFileName || "pdf";  // 滚动置顶(如果需要)  window.pageYOffset = 0; // 或者使用 window.scrollTo(0, 0);  // ... 其他可能的滚动设置(如果有)  // 使用html2canvas捕获元素并转换为canvas  html2Canvas(ele, {  dpi: window.devicePixelRatio * 2, // 根据需要调整DPI  useCORS: true, // 允许跨域图片  // ... 其他选项  }).then(canvas => {  // 隐藏加载消息(如果有)  this.$message.closeAll(); // 假设您使用的是Element UI的message组件  // 创建PDF文档并添加canvas内容  const pdf = new JsPDF('p', 'mm', 'a4'); // 使用A4纸,横向  const imgProps = pdf.getImageProperties(canvas.toDataURL('image/png'));  // 根据需要添加多页内容(如果需要)  let heightLeft = imgProps.height;  const top_left_margin = 10; // 您可以根据需要调整边距  const pdfWidth = pdf.internal.pageSize.getWidth() - 2*top_left_margin;  const pdfHeight = pdf.internal.pageSize.getHeight() - 2*top_left_margin;  while(heightLeft > 0) {  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', top_left_margin, top_left_margin, pdfWidth, Math.min(pdfHeight, heightLeft));  if (heightLeft > pdfHeight) {  pdf.addPage();  }  heightLeft -= pdfHeight;  // 如果需要,可以在此处添加页眉/页脚等  }  // 保存PDF  pdf.save(pdfFileName + '.pdf');  }).catch(error => {  console.error('Error generating PDF:', error);  // 显示错误消息(如果需要)  this.$message.error('生成PDF时出错');  });  };  }  
};

3、main.js中引入

import htmlToPdf from './utils/htmlToPdf.js'Vue.use(htmlToPdf)

4、vue页面中使用

在需要打印的块元素上边添加id='pdfDom'

this.GetPdfFromHtml('pdfDom',this.name)

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

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

相关文章

一文get懂kwai短视频助力巴西博弈slots游戏广告优势

一文get懂kwai短视频助力巴西博弈slots游戏广告优势 在数字化时代,短视频广告凭借其独特的魅力和高效的传播方式,成为了各大品牌进行营销推广的重要手段。特别是在巴西这个充满活力的国家,kwai短视频广告以其独特的方式,为博弈游…

2024企业数据资产化及数据资产入表方案梳理

01 数据资产入表:是一个将组织的各类数据资产进行登记、分类、评估和管理的流程。 数据资产包括:客户信息、交易记录、产品数据、财务数据等。 做个比喻吧:数据资产入表就像是给公司的数据资产做“人口普查”—— ①找出公司有哪些数据找…

Pytorch课程论文设计参考

Pytorch下基于卷积神经网络的手写数字识别 论文格式 利用wps初步美化论文格式教程 wps论文格式变的的原因 格式变的根本原因是word为流式文件,就算同是word同一个版本不同电脑也会有可能变,字体变是因为没有嵌入字体然后观看的那台没有这个字体。 一、…

机器学习环境搭建

前言 个人笔记,记录框架和小问题,没有太详细记载。。 1、Anaconda安装 下载地址: Free Download | Anaconda (慢) ​ 国内镜像:https://link.csdn.net/?targethttp%3A%2F%2Fitcxy.xyz%2F241.html 下载…

【硬件开发】安规电容X电容和Y电容

为什么有安规电容 国家为了保护人民的安全要求,电容器失效后,不会导致电击,不危及人身安全的安全电容器 安规电容的作用 滤除雷电冲击波,以及插拔插座的高频噪声 X电容 聚酯电容 位置 X电容位于火线和零线之间 作用 滤除…

Bunny的PT+SFT训练

GitHub - BAAI-DCAI/Bunny: A family of lightweight multimodal models.A family of lightweight multimodal models. . Contribute to BAAI-DCAI/Bunny development by creating an account on GitHub.https://github.com/BAAI-DCAI/Bunny1.环境安装 conda create -n bunny …

观测云产品更新 | Pipelines、智能监控、日志数据访问等

观测云更新 Pipelines 1、Pipelines:支持选择中心 Pipeline 执行脚本。 2、付费计划与账单:新增中心 Pipeline 计费项,统计所有命中中心 Pipeline 处理的原始日志的数据大小。 监控 1、通知对象管理:新增权限控制。配置操作权…

经典小游戏(一)C实现——三子棋

switch(input){case 1:printf("三子棋\n");//这里先测试是否会执行成功break;case 0:printf("退出游戏\n");break;default :printf("选择错误,请重新选择!\n");break;}}while(input);//直到输入的结果为假,循环才会结束} …

springboot是否可以代替spring

Spring Boot不能直接代替Spring,但它是Spring框架的一个扩展和增强,提供了更加便捷和高效的开发体验。以下是关于Spring Boot和Spring关系的详细解释: Spring框架: Spring是一个广泛应用的开源Java框架,提供了一系列模…

什么是有效的电子签名?PDF电子签名怎样具备法律效力?

电子签名逐渐成为商务文书和法律文件中不可或缺的一部分。《电子签名法》自2005年4月1日起施行,这一立法是中国信息化法律的重要里程碑,为电子签名应用奠定了法律基础。电子签名不仅仅是一种技术手段,更是一种法律认可的签名形式。那么究竟什…

跨模型知识融合:大模型的知识融合

大模型(LLMs)在多个领域的应用日益广泛,但确保它们的行为与人类价值观和意图一致却充满挑战。传统对齐方法,例如基于人类反馈的强化学习(RLHF),虽取得一定进展,仍面临诸多难题&#…

百刀神书!从0搭建神经网络!我服!

《Neural Networks from Scratch in Python》是一本深入浅出的书籍,旨在帮助读者从零开始理解和实现神经网络模型。作者使用Python语言,从基本的数学概念和神经网络的基本原理开始,逐步引导读者探索神经网络的各个组成部分。 该书介绍了神经…

AI数字人直播系统源码解析:教你如何高效搭建直播系统!

在人工智能技术飞速发展的今天,以AI数字人直播为代表的数字人应用开始为各大企业引进,并引发了一场“AI数字人直播浪潮”。在此背景下,许多创业者都感受到了所蕴含着的巨大前景和收益空间,从而有了搭建AI数字人直播系统的想法&…

BGE M3-Embedding 模型介绍

BGE M3-Embedding来自BAAI和中国科学技术大学,是BAAI开源的模型。相关论文在https://arxiv.org/abs/2402.03216,论文提出了一种新的embedding模型,称为M3-Embedding,它在多语言性(Multi-Linguality)、多功能…

Ollama中文版部署

M1部署Ollama Ollama中文网站: Featured - 精选 - Ollama中文网 下载网址: Download Ollama on macOS 安装后运行llma3模型: ollama run llama3:8b 界面使用: GitHub - open-webui/open-webui: User-friendly WebUI for LLMs (Formerly Ollama WebUI) 部署open-webui: do…

FT232串口win11打不开,重新安装驱动问题解决。

问题现象:FT232 WIN11打不开,串口识别正在被占用。更改串口号问题无法解决。 解决办法: 卸载驱动, 重启电脑, 去官网下驱动安装问题解决。Drivers - FTDI

原神最大数据泄露事件!

你知道吗? 一位黑客公开了原神的内部资料,并对米哈油的网络安全表示失望。那么他为什么要这样做呢? 前段时间,由于单方面对原神游戏设计的不满,黑客对米哈游进行了入侵。未被公开的新角色、新地图,甚至是…

简易深度学习(1)深入分析神经元及多层感知机

一、神经元 单个神经元结构其实可以认为是一个线性回归模型。例如下图中 该神经元输入为三个特征(x1,x2,x3),为了方便理解,大家可以认为每条线上都有一个权重和特征对应(w1,w2&…

计算机组成期末复习(山大复习版)

文章目录 前言一.计算机系统概述1.计算机的软硬件概念及各自组成易错点: 2.冯诺依曼计算机的特点:易错点: 3.程序和数据都采用二进制代码,计算机如何区分指令和数据?4.现代计算机硬件框架图5.计算机硬件的主要技术指标…

LabVIEW与C#相互调用dll

C#调用LabVIEW创建的dll 我先讲LabVIEW创建自己的.net类库的方法吧,重点是创建,C#调用的步骤,大家可能都很熟悉了。 1、创建LabVIEW项目,并创建一个简单的add.vi,内容就是abc,各个接线端都正确连接就好。 …