Vue——导出pdf

最新推荐文章于 2024-06-26 16:17:30 发布
最新推荐文章于 2024-06-26 16:17:30 发布
阅读量191 收藏
点赞数
分类专栏： Vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygkyufcl/article/details/105225046
版权
本文介绍了如何在Vue项目中实现PDF导出功能，详细步骤包括安装依赖项、编写utils/exportPdf.js、配置main.js以及在组件中使用该功能。特别提示，为确保导出效果，建议使用pt作为样式单位，设定固定宽度，并根据A4纸尺寸调整样式。
摘要由CSDN通过智能技术生成

一、安装依赖项

npm i html2canvas
npm i jspdf

二、utils/exportPdf.js

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default{
   
  install (Vue, options) {
   
    Vue.prototype.getPdf = function (id,title) {
   
      html2Canvas(document.querySelector(`#${
     id}`), {
   
        // allowTaint: true
        useCORS:true//看情况选用上面还是下面的，
最低0.47元/天 解锁文章
ygkyufcl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue导出pdf
weixin_40854917的博客
06-07 173
document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半。const eleH = el.offsetHeight // 获得该容器的高。const eleW = el.offsetWidth // 获得该容器的宽。dpi: 96, // 分辨率。// 导出页面为PDF格式。// 导出页面为PDF格式。
Vue项目导出为PDF的解决方案.pdf
08-20
在实际应用中，可能用户希望将系统中一个页面展示的所有数据报 表，用PDF的文件格式下载下来，以便于其他用途。但是在系统中应用 到的大部分可以绘制数据报表的插件或组件，只能做到将一个数据报表 以其他的文件形式（如：图片等）导出出来，无法将多个报表呈现在一 个文件中。本篇描述的就是，在Vue 2.0 的项目中，遇到类似的需求， 如何将需要的部分页面内容导出为PDF文件
vue导出PDF(vue2，插件：pdfmake ，表格)
weixin_46965237的博客
04-28 3233
vue导出PDF(vue2，插件：pdfmake，表格)
vue项目纯前端实现导出pdf文件
最新发布
2301_76866366的博客
06-26 508
2、创建htmlToPdf.js，地址：src/utils/htmlToPdf.js。在需要打印的块元素上边添加id='pdfDom'3、main.js中引入。4、vue页面中使用。
前端（vue）导出pdf
Jimyking的博客
02-08 1120
纯前端（vue）导出pdf
VUE 表格导出PDF格式
m0_71966801的博客
07-03 583
如果想添加自己的水印。
vue导出pdf
szh1127249432的博客
10-28 257
1.安装插件 jspdf html2canvas //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install jspdf --save 2、创建htmlToPdf.js文件 //分页 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install (Vue, opt
Puppeteer 实战场景 —— 生成 PDF
夏狗花花的博客
07-24 1684
给单个 HTML 生成 FDP 这里拿 Vue 文档为例，把文档的介绍页转存为 pdf 。注意，生成PDF只支持无界面的操作，headless 必须为 true const puppeteer = require('puppeteer'); puppeteer.launch({ headless:true, //生成PDF只支持无界面的操作！（我刚开始调试设了 flase ，一直报错哈哈哈） defaultViewport:{ width:1920, hei
java OA办公管理系统 Springboot vue.js 前后分离 跨域 工作流 集成代码生成器（csdn）——.pdf
12-01
本文将详细讲解一个基于Java的OA办公管理系统，该系统采用Springboot框架，前端使用vue.js实现前后端分离，同时具备跨域处理、工作流管理和集成代码生成器等功能。此系统旨在提高开发效率，提供高效稳定的办公自动化...
vue导出html、word和pdf
热门推荐
weixin_34289454的博客
07-30 1万+
导出的页面组件如下： <template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div> </template> 1、导出html 方法...
vue html转pdf
02-28
vue框架中html转pdf代码，很实用，适合项目常用作为工具类和平时开发调试用。
vue实现word，pdf文件的导出功能
12-09
vue实现word或pdf文档导出的功能，我的项目是：后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，代码如下： import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/msword` //word文档为msword,pdf文档为pdf }); let obj
Vue如何将页面导出成PDF文件
11-19
本文实例为大家分享了Vue将页面导出成PDF文件的具体代码，供大家参考，具体内容如下 我在前端岗位上要实现个可视化图表页的PDF文件导出，在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法。 1. 下载npm包 npm install html2canvas npm install jspdf 2. 创建插件.js文件 Vue-cli项目的话是在./utils文件夹下，我在这里使用的nuxt框架，所以是在./plugins文件夹下。 import html2Canvas from 'html2canvas'; import JsPDF from '
print-demo:前端开发打印当前网页的指定区域内容，或将网页导出为多页的PDF
05-31
print-demo 网页打印插件示例项目。 项目运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 关于print.js 功能：网页打印插件，支持打印或不打印指定区域，同时支持将网页导出为pdf。 已实现： 原生js书写，不依赖其他库 可指定打印（或不打印）的区域 支持定制css，内联、外联均可 支持select、input（text、redio、checkbox）、textarea获取参数 待验证： 目前测试谷歌浏览器运行正常，其他低版本浏览器兼容性待验证 如何使用 本插件可在 js 或 vue 项目中使用，其他框架未验证。两种使用场景引入的js大
python图表 导出pdf_Echarts导出为pdf echarts导出图表（包含背景）
weixin_39880150的博客
12-17 717
Echarts好像是只支持png和jpg的导出，不支持pdf导出。我就想着只能够将png在后台转为pdf了。首先介绍一下jsp界面的代码。var thisChart = echarts.init(document.getElementById('myChart'));$('#activeResourcesExportBtn').on('click',function(){var chartExpo...
Vue实现前端导出PDF文件
qq_39870203的博客
04-03 355
el-button type="primary" style="margin-bottom:16px" icon="el-icon-share" @click.stop="handleDown">导出PDF</el-button>ExportPDF.downloadPDF( document.querySelector('#exportPDF'),'PDF自定义名称');注意：新建的文件夹名称并非一定为vendor,且并非一定在src文件下,可以是子目录也可以是你自己能找到的目录。
vue前端html导出pdf
ghx123456ghx的博客
01-29 1373
package.json中添加依赖。
前端使用vue实现导出pdf
weixin_56358229的博客
08-19 446
1、使用html2canvas和jspdf插件实现 这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件 （1）缺点 生成的pdf质量不高，画面有些模糊，失真严重 如果在分页的地方有图片的话，可能会把图片也给你一分为二了 （2）安装插件 npm install --save html2canvas npm install jspdf ...
vue怎么导出pdf文件
07-27
在Vue中导出PDF文件，可以使用一些第三方库来实现，例如jsPDF和html2canvas。下面是一个简单的示例代码： 1. 首先，安装所需的库： ```bash npm install jspdf html2canvas ``` 2. 在Vue组件中，导入所需的库： ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值