vue 生成PDF(A4标准PDF分页)

1.先安装两个插件

//页面转图片

npm install --save html2canvas

//图片转PDF

npm install jspdf --save

2. 在需要导出的dom节点增加ref='pdf' 例如

<div ref="pdf"> 这是待转换的页面，点击 <button @click="handleExport">导出</button> 点击导出PDF</div>

3.定义导出方法

handleExport() {

downloadPDF(this.$refs.pdf);

4.在页面导入 import { downloadPDF } from "@/utils/pdf.js";

pdf.js 内容如下

import html2canvas from "html2canvas";

import jsPDF from "jspdf";

export const downloadPDF = page => {

html2canvas(page).then(function (canvas) {

canvas2PDF(canvas);

});

};

const canvas2PDF = canvas => {

let contentWidth = canvas.width;

let contentHeight = canvas.height;

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

let imgWidth = 595.28;

let imgHeight = 592.28 / contentWidth * contentHeight;

//let imgHeight = 700/contentWidth * contentHeight;

//一页pdf显示html页面生成的canvas高度;

var pageHeight = contentWidth / 592.28 * 841.89;

let totalHeight = contentHeight;

// 第一个参数： l：横向 p：纵向

// 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）

let pdf = new jsPDF("p", "pt");

let position = 0;

// pdf.addImage(

// canvas.toDataURL("image/jpeg", 1.0),

// "JPEG",

// 0,

// imgWidth,

// imgHeight

// );

if (totalHeight < pageHeight) {

pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);

} else {

while (totalHeight > 0) {

pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, position, imgWidth, imgHeight)

totalHeight -= pageHeight;

position -= 841.89;

//避免添加空白页

if (totalHeight > 0) {

pdf.addPage();

}

// pdf.addImage(

// canvas.toDataURL("image/jpeg", 1.0),

// "JPEG",

// 0,

// position,

// imgWidth,

// imgHeight

// );

pdf.save("导出.pdf");

};

5.点击导出即可成功

vue 生成PDF(A4标准PDF分页)相关推荐

html2Canvas + jsPDF vue生成pdf（A4纵向或A3横向）
1: 第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save 2:创建名称 html ...
长内容生成pdf 防止内容pdf分页隔断
本案例是根据HTML内容文本先转换成图片,再把图片生成pdf,不一定适合所有项目,只是项目工作中的记录生成pdf import html2canvas from 'html2canvas' impo ...
vue生成pdf文件
在网上找的资源,第一次做这样的功能,记录一下学习. 大概思路就是将html转换成canvas,获取canvas的宽高,将canvas转换成图片.最后将图片转换成pdf. 在网上找过很多资源,帮助自己解 ...
vue 在线访问word,excel,pdf 文件以及打印
git 项目代码一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...
vue页面内容保存为PDF
1.安装插件html2canvas+jspdf npm i -s html2canvas jspdf 2.在src下新建util文件夹并新建htmlToPdf.js,添加如下代码 import htm ...
在线文件/文档预览/分页分片预览之开源kkfileview（word转pdf，pdf截取，pdf转图片，Aspose jobConverter ， OpenOffice ，libreoffice ）
前提说明浏览器不能直接浏览word文件,但可以浏览pdf文件!!! 可以后台把word,excel 转成成pdf.然后给前端预览: 业界常用的开源工具有:Aspose jobConverter , ...
页面截图导出为PDF，以及PDF强行截断分页问题的处理
页面截图导出为PDF,以及PDF强行截断分页问题的处理需求将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示. 思路 1.将需要导出的dom,都用一个特殊的类 ...
记录一次使用JS生成word后端转换PDF功能
大致思路接到一个需求,将vue页面生成word,并且也可以生成pdf 前端VUE生成WORD 因为使用的是VUE大致也是分为两种方法 jquery的wordExport插件(这里使用VUE不建议使用 ...
Vue将当前页面转为PDF并下载
一.安装所需依赖 1.将页面html转换成图片 npm install --save html2canvas 2.将图片生成pdf npm install jspdf --save 二.在公共文件夹下 ...

vue 生成PDF(A4标准PDF分页)

vue 生成PDF(A4标准PDF分页)相关推荐

最新文章

热门文章