摘抄自

https://www.cnblogs.com/zhangtianqi520/p/9323873.html

先下载所需依赖

npm install --save html2canvas

npm install jspdf --save

关键代码如下:

getPdf () {
var title = this.title;
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let 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(title + '.pdf')
}
)
},

#pdfDom 为所需下载的起使位置

致敬作者

Vue下载页面显示内容的更多相关文章

  1. Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...

  2. 微信小程序 按钮固定在页面底部遮住页面显示内容问题

    我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题? 第一部分:问题的表现是怎么样的? 我设置了页面有0-99共100个数,但是 ...

  3. JS判断IE版本并在页面显示内容

    <script type="text/javascript"> var isIE = function (ver) { var b = document.createE ...

  4. 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...

  5. 判断数据库内容,在页面显示自定义数据case when

    判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...

  6. jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

    实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...

  7. vue打包后页面显示空白但是不报错

    在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.

  8. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  9. 深入刨析tomcat 之---第1篇,解决第1,2章bug 页面不显示内容Hello. Roses are red.

    writedby 张艳涛, 第一个问题是不显示index.html网页 19年才开始学java的第二个月,就开始第一遍看这本书,我估计当初,做第一章的一个案例,自己写代码,和验证就得一天吧,当初就发现 ...

随机推荐

  1. Unity shader 官网文档全方位学习(二)

    摘要: 这篇文章主要介绍Lighting model及自定义Lighting model 上文咱们学了surface shader.这玩意在开始的时候啊,在定义哪个函数处理surface时用一定要指定 ...

  2. Arcmap 空间连接,在通过面包含面的空间关系做属性关联的时候,发生关联冗余的问题。

    处理过程: (1)用 空间关联 工具实现  面与面的  空间和属性关联. (2) 问题描述: 一个子面要素对应多个父面要素,出现数据冗余. 问题根源: 解决办法: 取子面要素的 中心点,在用中心点和 ...

  3. neo4j配置(转)

    我的neo4j配置 # 修改第9行,去掉#,修改数据库名 dbms.active_database=wkq_graph.db # 修改第12行,去掉#.修改路径,改成绝对路径 dbms.directo ...

  4. Taro之百度地图显示定位点和信息

    由于没有后台数据就随机生成点来模拟了.具体代码如下. componentDidMount = () => { const { BMap, BMAP_STATUS_SUCCESS } = wind ...

  5. Linux 用户与组

    在 Linux 操作系统下,如何添加一个新用户到一个特定的组中?如何同时将用户添加到多个组中?又如何将一个已存在的用户移动到某个组或者给他增加一个组?对于不常用 Linux 的人来讲,记忆 Linux ...

  6. 【原创】控制perl和python脚本执行过程中脚本文件是否关闭的方法

    引子 跟踪perl和python脚本对文件的访问,实际过程中,perl和python解析器在解析完脚本后,直接关闭了 脚本文件,在进程中查询不到是访问文件的脚本文件名称. shell.perl和pyt ...

  7. 解题(IdenticalTree--拓扑结构相同子树 )

    题目描述 对于两棵彼此独立的二叉树A和B,请编写一个高效算法,检查A中是否存在一棵子树与B树的拓扑结构完全相同. 给定两棵二叉树的头结点A和B,请返回一个bool值,代表A中是否存在一棵同构于B的子树 ...

  8. android 组件隐藏

    参考 https://blog.csdn.net/bbtianshi/article/details/79556609 view.setVisibility(View.GONE);

  9. Entity Framework 6源码学习--设置调试EF环境

    下载源代码 打开https://github.com/aspnet/EntityFramework6下载源代码. 建立调试解决方案 建立一个EntityFramework.Sample.sln在Ent ...

  10. JavaSE基础知识(5)—面向对象(5.6 static关键字)

    一.说明 static属于一种修饰符,可以用于修饰 属性.方法.初始化块.内部类用static修饰的成员,称为静态成员不用static修饰的成员,称为普通成员 二.静态属性的特点 1.生命周期 静态属 ...