先安装支持

将页面html转换成图片
npm install --save html2canvas
将图片生成pdf
npm install jspdf --save

组件引用:

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
//将特定部分转成pdf并下载
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')
}
)
},

vue将网页中的特定部分转成pdf并下载(仅供个人学习记录)的更多相关文章

  1. Python 网络爬虫 009 (编程) 通过正则表达式来获取一个网页中的所有的URL链接,并下载这些URL链接的源代码

    通过 正则表达式 来获取一个网页中的所有的 URL链接,并下载这些 URL链接 的源代码 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 ...

  2. JS字符串替换,将一个字符串中的特定字符串换成其他字符串

  3. sql把一个字段中的特定字符替换成其他字符

    将'0654879'替换成'0754879' UPDATE dbo.SG_Functionality SET FunctionalityCode=REPLACE(FunctionalityCode,' ...

  4. MVC中的自定义标签分页控件,仅供大家学习!!

    public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, ...

  5. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  6. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理

    我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. POJ 3616 奶牛挤奶

    Milking Time 贝茜是一个勤劳的牛.事实上,她如此​​专注于最大化她的生产力,于是她决定安排下一个N(1≤N≤1,000,000)小时(方便地标记为0..N-1),以便她生产尽可能多的牛奶. ...

  2. 如何在开发过程中获取客户端的ip呢?

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...

  3. redis缓存中间件基础

    前序: 默认使用SimpleCacheConfiguration 组件ConcurrentMapCacheManager==ConcurrentMapCache将数据保存在ConcurrentMap& ...

  4. python+selenium的web自动化测试之一(手工执行)

    环境 Windows 前提: 1. python已正常安装 2. selenium已正常安装. 如果没安装,会报:ImportError: No module named 'selenium' (参考 ...

  5. python 学习笔记 5 ----> dive into python 3

    字符串 文本:屏幕上显示的字符或者其他的记号 计算机认识的东西:位(bit)和字节(byte) 文本的本质:某种字符编码方式保存的内容. 字符编码:一种映射(显示的内容  ----> 内存.磁盘 ...

  6. Matlab - 各种函数学习

    一.find函数 (1)find()函数的基本功能是返回向量或者矩阵中不为0的元素的位置索引. X = [1 0 4 -3 0 0 0 8 6]; index = find(X) 返回不为零的位置索引 ...

  7. springboot killed springboot 无故停止运行解决办法

    测试环境的服务部署在阿里云服务器上,运行一段时间总是自动宕掉,在配置文件里加上内存溢出配置,也不能打印出相关日志,一直找不出原因.今天在网上:http://www.cnblogs.com/chener ...

  8. Petrozavodsk Winter Camp, Day 8, 2014, Fine Brochures

    1的个数-块的个数+多减的个数+flag 多减的只会在一个循环末尾出现 #include <bits/stdc++.h> using namespace std; #define rep( ...

  9. 使用shiro的密码服务模块

    http://jinnianshilongnian.iteye.com/blog/2021439 http://www.cnblogs.com/snidget/p/3817763.html

  10. 基于服务器AAA实验

    ---恢复内容开始--- 一.实验拓扑 二.实验地址分配  设备  端口  ip  掩码  AAAA  g0/0 and se0/3/0  192.168.1.1 and 192.168.4.1  2 ...