将页面的内容导出使用html2canvas+jsPDF
第一首先是要引用
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import PDFJS from 'pdfjs-dist' PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
第二页面点击按钮
第三
//要导出的div的id
var target = document.getElementById('export_content1') html2canvas(target, { dpi: 172 }).then(function(canvas) {
console.log(canvas)
var contentWidth = canvas.width
var contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html页面高度
var leftHeight = contentHeight
//pdf页面偏移
var position = 0
//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdf = new jsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save('导出.pdf')
})
将页面的内容导出使用html2canvas+jsPDF的更多相关文章
- WEB页面下载内容导出excel
internal class DownloadHandler : IDownloadHandler { public DownloadHandler() { ...
- 纯前端html导出pdf--分页+不分页--html2canvas+jsPDF
前言 最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求. 本文就简单介绍一下html2canvas+jsPDF导 ...
- 将页面上的内容导出到Excel
<asp:Button ID="lkbExport" runat="server" Name="Save" Text="导出 ...
- jsp 页面内容导出到Excel中
日常使用网络资源时经常需要把网页中的内容下载到本地,并且导出到Excel中,现在介绍一种非常简单的方式实现网络资源的下载.只需要讲jsp的最上面加上一句话 <% response.reset() ...
- 使用NPOI将TABLE内容导出到EXCEL
项目中需要将页面中的table内容导出到EXCEL,在用了几种方法后发现NPO是最快&最好的 需要应用 NPOI.dll 还有个Ionic.Zip.dll不知道有用没,没去研究,两个DLL都放 ...
- javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印第1/2页
由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决. 最近有需求将数据导出到word里,然后编辑打印. 想 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- window.print() 打印页面部分内容的方法
用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...
- Struts2(四)——页面相关内容
上篇博客总结了数据流转各个方面的内容,这篇重点说一下框架对于界面上知识. 一,说到页面,记得在总体介绍中,说到Struts2比Struts1的一方面优势就是它支持更多的视图技术(Freemarker, ...
随机推荐
- js在当前日期基础上,加1天 3天 7天 15天
需求 点击保障期的天数 根据起始时间算出结束时间 代码 //点击保障期触发的方法 periodChange(val,id){ this.activeNumperiod=val this.submitD ...
- Parameter ‘brOrderNo’ not found
org.apache.ibatis.binding.BindingException: Parameter 'brOrderNo' not found. Available parameters ar ...
- [USACO18JAN] MooTube (离线并查集)
题目大意:给你一棵边权树,定义两点间距离为它们唯一路径上的最小路权,求与某点距离不大于K(k为已知)的点的数量 带权并查集维护集合内元素总数 路和问题 都按权值大到小排序,枚举问题, 建权值不小于K的 ...
- HDU 1828 Picture (线段树:扫描线周长)
依然是扫描线,只不过是求所有矩形覆盖之后形成的图形的周长. 容易发现,扫描线中的某一条横边对答案的贡献. 其实就是 加上/去掉这条边之前的答案 和 加上/去掉这条边之后的答案 之差的绝对值 然后横着竖 ...
- markdown图片设置
工具:typora 1. 设置图片大小(本节引用自 https://support.typora.io/Resize-Image/) Typora允许使用<img>标签显示图像,也可用于调 ...
- 小试牛刀之sort()排序的实现
受大学室友的鼓动,我也打算利用公众平台来记录自己的前端知识积累,同时呢,自己总结的东西,总归会有局限性,希望小伙伴能给我指点迷津.知识就是一张巨大的网,作为一名摸不清头绪的入学者,唯一能做的事情就是吐 ...
- java application指的是什么
在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序——Applet程序.Applet程序(也称Java小程序)是运行于各种网页文件中,用于 ...
- 创业笔记-Node.js入门之阻塞与非阻塞
阻塞与非阻塞 正如此前所提到的,当在请求处理程序中包括非阻塞操作时就会出问题.但是,在说这之前,我们先来看看什么是阻塞操作. 我不想去解释“阻塞”和“非阻塞”的具体含义,我们直接来看,当在请求处理程序 ...
- CF16A Flag
CF16A Flag 题意翻译 题目描述 根据一项新的ISO标准,每一个国家的国旗应该是一个n×m的格子场,其中每个格子最多有10种不同的颜色.并且国旗应该有条纹:旗帜的每一行应包含相同颜色的方块,相 ...
- Keil5.15版本号
Keil5.15下载地址 http://pan.baidu.com/s/1kT6AGvX Keil5.15软件补丁下载地址 http://www.keil.com/dd2/pack/ Keil5.15 ...