将页面的内容导出使用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, ...
随机推荐
- Python——微信数据分析
数据可视化:http://echarts.baidu.com/echarts2/doc/example.html import refrom wxpy import *import jiebaimpo ...
- [置顶]
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...
- 新手学python-Day4-进制,数据类型,编码转换,列表
python3中字符串的编码转换 names=b'\xe2\x82\xac20'.decode('utf-8') print(names) names='€20'.encode('utf-8') pr ...
- STM32 关于HAL库硬件SPI要注意的问题总结
利用STM32CUbeMx编写程序,大大方便了开发,最近做的项目利用到了 STM32CUbeMx的硬件SP,这里对SPI的使用做一个总结. HAL库里的硬件SPI主要有以下几个库函数: /* hspi ...
- HDU 4324 Contest 3
直接DFS即可 #include <iostream> #include <string.h> #include <algorithm> #include < ...
- 《Objective-C高级编程:iOS与OS X多线程和内存管理》读后感
拿到这本书的第一感觉是非常薄,可是内容就如同序里面所说,这不是一本面向刚開始学习的人的书,比較有深度,对C/C++全然不熟悉的话非常多东西会看不明确. 尽管此书在技术点上仅仅谈到了ARC.Blocks ...
- Spring boot 使用@Value注入属性
Spring boot 使用@Value注入属性 学习了:http://blog.csdn.net/hry2015/article/details/72353994 如果启动的时候报错: spring ...
- Microsoft Updateclient更新
大家好, 微软Microsoft Update产品组官方博客于昨天宣布了有关最新的Windows Updateclient更新的消息.依据这则博客.微软从当日開始逐渐向全部Windows 7, ...
- javascript 简单语法 对象属性及方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 大家都能看懂的 canvas基础教程
原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...