主要参考

https://blog.csdn.net/qq_37880968/article/details/94626001

1.添加模块

npm install --save html2canvas

npm install jspdf --save

2.引入工具函数

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'; /**
* @param ele 要生成 pdf 的DOM元素(容器)
* @param padfName PDF文件生成后的文件名字
* */ function downloadPDF(ele, pdfName){ let eleW = ele.offsetWidth;// 获得该容器的宽
let eleH = ele.offsetHeight;// 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 var canvas = document.createElement("canvas");
var abs = ; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条) if(win_out>win_in){
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in)/; // 获得滚动条宽度的一半
// console.log(a, '新abs');
}
canvas.width = eleW * ; // 将画布宽&&高放大两倍
canvas.height = eleH * ; var context = canvas.getContext("2d");
context.scale(, );
context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
// 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
// translate的时候,要把这个差值去掉 // html2canvas(element).then( (canvas)=>{ //报错
// html2canvas(element[0]).then( (canvas)=>{
html2canvas( ele, {
dpi: ,
// allowTaint: true, //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的
useCORS:true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
} ).then( (canvas)=>{
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = ;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 595.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
pdf.addImage(pageData, 'JPEG', , , imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > ) {
pdf.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > ) {
pdf.addPage();
}
}
}
//可动态生成
pdf.save(pdfName);
})
}
export default {
downloadPDF
}

3.在需要的地方引入该文件

html:
<div id="demo"></div>
js:handleDown () {
htmlToPdf.downloadPDF(document.querySelector('#demo'), '离职申请表')
}

当然最好使用ref

vue生成pdf的更多相关文章

  1. Vue 生成PDF并下载

    实现原理 该功能原理是将页面转化伟canvas在把canvas转化为base64数据 最后将数据通过pdf.js生成下载,故需要和html2canvas一起使用 友情提醒这个pdf下载不能在app里直 ...

  2. vue实现pdf导出,解决生成canvas模糊等问题

    最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 第一个.将页面html转换成图片 npm install --sa ...

  3. netcore3.1 + vue (前后端分离)生成PDF(多pdf合并)返回前端打印

    1.使用Adobe Acrobat XI Pro编辑pdf模板 2.公共类代码 3.service层调用 4.Controller层 5.前端(Vue) 因为print.js不支持宋体,所以打算用后台 ...

  4. 将html中的内容生成PDF并且下载

    <head> @*需要引用的js库*@ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0. ...

  5. Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载

    使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...

  6. Java使用iText7生成PDF

    前言 我们之前使用js库html2canvas + jspdf实现html转PDF.图片,并下载(详情请戳:html页面转PDF.图片操作记录),大致原理是将页面塞到画布里,以图片的方式放到PDF中, ...

  7. 使用 WebView2 封装一个生成 PDF 的 WPF 控件

    使用 WebView2 封装一个生成 PDF 的 WPF 控件 最近在迁移项目到 .net6,发现项目中用的 PDF 库不支持 .net6,于是想着换一个库.结果找了一大圈,发现不是版本不支持,就是收 ...

  8. 使用puppeteer生成pdf与截图

    之前写过一篇 vue cli2 使用 wkhtmltopdf 踩坑指南,由于wkhtmltopdf对vue的支持并不友好,而且不支持css3,经过调研最终选择puppeteer,坑少,比较靠谱. 一. ...

  9. 利用Java动态生成 PDF 文档

    利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...

随机推荐

  1. Helm 安装Kafka

    helm镜像库配置 helm repo add stable http://mirror.azure.cn/kubernetes/charts helm repo add incubator http ...

  2. Spring 整合 JPA

    spring 整合 jpa 客户的基本CRUD 依赖 <properties> <spring.version>4.2.4.RELEASE</spring.version ...

  3. 洛谷P3835 【模板】可持久化平衡树(FHQ Treap)

    题面 传送门 题解 可持久化一下就好了,具体可以看代码 这里有一个小\(trick\)就是我们原本在\(merge\)的时候也要新建节点的,但是我们\(merge\)之前一般已经\(split\)过了 ...

  4. [codevs1286]郁闷的出纳员

    题目描述 Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复 ...

  5. 转:ubuntu16安装python3.6并将环境设置为系统默认

    按照本文升级到3.6,但pip无法运行了,问题没有解决 1.添加python3.6安装包,并且安装 sudo apt-get install software-properties-common su ...

  6. Layui 隐藏左侧菜单

    简单实现 //隐藏菜单 var bl = $("#LAY_app_flexible").hasClass("layui-icon-shrink-right"); ...

  7. django命名url与url反向解析

    1.在urls.py路由中指定别名 2.在views.py视图文件中导入from django.shortcuts import render, redirect, reverse 3.也可从这里导入 ...

  8. 设置 npm 源为淘宝镜像

    淘宝 npm 网址 https://npm.taobao.org/ 修改 npm config set registry http://registry.npm.taobao.org/ 还原 npm ...

  9. vue 2.0 及 vue 3.0 rem配置

    vue 2.0 配置 rem 首先先安装postcss-px2rem   (百度可以) https://www.jianshu.com/p/e6476bbc2131 npm install postc ...

  10. V8 引擎如何进行垃圾内存的回收?

    JS 语言不像 C/C++, 让程序员自己去开辟或者释放内存,而是类似Java,采用自己的一套垃圾回收算法进行自动的内存管理.作为一名资深的前端工程师,对于JS内存回收的机制是需要非常清楚, 以便于在 ...