第一首先是要引用

 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的更多相关文章

  1. WEB页面下载内容导出excel

    internal class DownloadHandler : IDownloadHandler    {        public DownloadHandler()        {      ...

  2. 纯前端html导出pdf--分页+不分页--html2canvas+jsPDF

    前言 最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求. 本文就简单介绍一下html2canvas+jsPDF导 ...

  3. 将页面上的内容导出到Excel

    <asp:Button ID="lkbExport" runat="server" Name="Save" Text="导出 ...

  4. jsp 页面内容导出到Excel中

    日常使用网络资源时经常需要把网页中的内容下载到本地,并且导出到Excel中,现在介绍一种非常简单的方式实现网络资源的下载.只需要讲jsp的最上面加上一句话 <% response.reset() ...

  5. 使用NPOI将TABLE内容导出到EXCEL

    项目中需要将页面中的table内容导出到EXCEL,在用了几种方法后发现NPO是最快&最好的 需要应用 NPOI.dll 还有个Ionic.Zip.dll不知道有用没,没去研究,两个DLL都放 ...

  6. javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印第1/2页

    由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决. 最近有需求将数据导出到word里,然后编辑打印. 想 ...

  7. 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; ...

  8. window.print() 打印页面部分内容的方法

    用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...

  9. Struts2(四)——页面相关内容

    上篇博客总结了数据流转各个方面的内容,这篇重点说一下框架对于界面上知识. 一,说到页面,记得在总体介绍中,说到Struts2比Struts1的一方面优势就是它支持更多的视图技术(Freemarker, ...

随机推荐

  1. 关于read函数的一些分析

    ssize_t readn(int fd, std::string &inBuffer, bool &zero) { ssize_t nread = ; ssize_t readSum ...

  2. 《Let's Build A Simple Interpreter》之 Golang 版

    一直以来对编译器/解释器等都较有兴趣.我非科班出身,当初还在大学时,只是马马虎虎看完了<编译原理>之类教材,上机非常少,对龙书之类圣经也只是浅尝辄止而已.工作至今,基本已将编译原理相关知识 ...

  3. [NOIP补坑计划]NOIP2017 题解&做题心得

    终于做完了…… 场上预计得分:?(省一分数线:295) 由于看过部分题解所以没有预计得分qwq 题解: D1T1 小凯的疑惑 题面 震惊!一道小学奥数题竟难倒无数高中考生! 欢迎大家以各种姿势*和谐* ...

  4. nginx1.15.8源码安装

    useradd www -s /sbin/nologin -M yum -y install gcc  pcre-devel openssl-devel cd /usr/local/src wget ...

  5. 树形dp复习 树上依赖背包问题

    选课 今天又看了一下这道题,竟然AC不了了 自己的学习效率有点低下 要明白本质,搞透彻 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...

  6. 旋转VR相机不头晕:一个反直觉的发现

    旋转VR相机不头晕:一个反直觉的发现 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/deta ...

  7. unity 支持圆形、切倒角和虚化UGUI Shader

    // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt ...

  8. 【BZOJ 1305】[CQOI2009]dance跳舞

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 男生和女生每个人都分身成两个节点 即x[1],x[2]和y[1],y[2] 然后如果i和j不相互喜欢 那么add(x[i][2],y ...

  9. MyBatis学习总结(7)——Mybatis缓存

    一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...

  10. ASP.NET-HTML.Helper常用方法

    Html.ActionLink方法 Html.ActionLink("linkText","actionName") Html.ActionLink(" ...