前端实现——html2pdf功能(完成)

电商项目中，经常会遇到导出为PDF的功能，最最简单的方式就是：window.print()，可以自动展示出当前页面的打印预览效果。

如果使用：window.print()实现打印，我们可以通过在浏览器控制台测试一下效果：

效果如下所示：

这种情况window.print()适用于全屏页面的，而非弹窗的形式，如果要只打印弹窗部分，则需要用其他的方式：

`html2pdf`实现导出`html`页面为`pdf`

1.`npm install html2canvas jspdf --save`——安装插件到`package.json文件中的dependencies`里

将html2canvas和jspdf安装到package.json文件中的dependencies中，方便其他人通过npm install可以下载到本地的node_modules中

2.在`utlis`文件夹中添加`html2pdf.js`文件，内容如下：

// 导出页面为PDF格式
import html2canvas from "html2canvas";
import JSPDF from "jspdf";
/**** elementName: 需要输出PDF的页面id* htmlTitle: 页面标题* currentTime：创建时间*/
export default function(elementName, htmlTitle, currentTime) {var element = document.getElementById(elementName)html2canvas(element, {logging: false}).then(function(canvas) {var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向var ctx = canvas.getContext("2d")var a4w = 190;var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度var renderedHeight = 0while (renderedHeight < canvas.height) {var page = document.createElement("canvas")page.width = canvas.widthpage.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距renderedHeight += imgHeightif (renderedHeight < canvas.height) { pdf.addPage() } // 如果后面还有内容，添加一个空页// delete page;}pdf.save(htmlTitle + currentTime)})
}

3.在需要的页面使用：

import ExportSavePdf from "@/utils/html2pdf";
export default{...//保存文件ExportSavePdf("pdfcontent", "对账单",timeFormat(new Date(), "YYYY-mm-dd"));
}

分析一下上面的三个参数：

elementName:需要输出PDF的页面的id
htmlTitle:导出的PDF的页面标题
currentTime:导出的PDF的页面时间

第一个id就是页面中，需要导出部分的id;

第二个参数和第三个参数就是导出的pdf的标题部分组成：

前端实现——html2pdf功能(完成)相关推荐

怎样实现前端裁剪上传图片功能
怎样实现前端裁剪上传图片功能由于前端是不能直接操作本地文件的,要么通过<input type="file">用户点击选择文件或者拖拽的方式,要么使用flash等第三方 ...
前端实现搜索功能和模糊查询
前端实现搜索功能和模糊查询功能介绍: 在前端实现搜索,获取数据部分可以用ajax来实现,动态生成li标签,正则表达式实现的模糊查询 js实现代码: // $("#BA_2307596970 ...
10个常见的前端手写功能
10个常见的前端手写功能 1.防抖 2.节流 3.深拷贝 JSON方法递归拷贝 4.手写Promise 5.异步控制并发数 6.继承 ES5 继承(寄生组合继承) ES6继承 7.数组排序 sort ...
vue2+Google实现前端录屏功能
vue2+Google实现前端录屏功能话不多说直接上代码 html <div id="app" v-cloak><p v-if="!inProgres ...
用企业微信机器人做交互式前端-添加微信功能
用企业微信机器人做交互式前端-添加微信功能本系列所有文章请访问:概述开通机器人微信机器人先要在企业微信的后台开通: 创建应用获取该应用的发送秘钥生成该应用接收令牌生成该应用接收秘钥注1: ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...
纯前端实现文件下载功能
一般情况下,想要实现文件下载/导出功能,需要在前端把数据发到服务端或者发送下载请求到服务端,然后由服务端通过获取数据 -> 生成数据 -> 生成文件三个步骤生成数据,在响应请求头中包含Co ...
手机射频前端组成及功能简介
手机无线电通信框架图: 手机射频前端框架图: 射频前端重要组成部分: (1)PA:功率放大器(Power Amplifier) (2)滤波器:Filter (3)双工器:Duplexers (4)LN ...
【Web技术】1374- 纯 JS 实现灵活的前端主题切换功能
demo在线体验地址:https://hongqingcao.github.io/v-theme-colors/ 源码地址:https://github.com/HongqingCao/v-theme ...
前端性能测试 WebPagetest功能
WebPagetest功能简介 WebPagetest,是前端性能测试的利器: 可以为我们提供全方位的量化指标,包括页面的加载时间.首字节时间.渲染开始时间.最早页面可交互时间.页面中各种资源的字节数 ...

前端实现——html2pdf功能(完成)

`html2pdf`实现导出`html`页面为`pdf`

1.`npm install html2canvas jspdf --save`——安装插件到`package.json文件中的dependencies`里

2.在`utlis`文件夹中添加`html2pdf.js`文件，内容如下：

3.在需要的页面使用：

前端实现——html2pdf功能(完成)相关推荐

最新文章

热门文章

前端实现——html2pdf功能(完成)

html2pdf实现导出html页面为pdf

1.npm install html2canvas jspdf --save——安装插件到package.json文件中的dependencies里

2.在utlis文件夹中添加html2pdf.js文件，内容如下：

3.在需要的页面使用：

前端实现——html2pdf功能(完成)相关推荐

最新文章

热门文章

`html2pdf`实现导出`html`页面为`pdf`

1.`npm install html2canvas jspdf --save`——安装插件到`package.json文件中的dependencies`里

2.在`utlis`文件夹中添加`html2pdf.js`文件，内容如下：