vue pdf下载
主要技术栈是Vue,两个库:
具体实现代码如下:
<template>
<div class="priview_resume_container">
<div style="font-size: 16px" @click="getResume">点这里下载 </div>
</div>
</template>
<script>
export default {
name: 'priviewResume',
methods: {
getResume() {
this.commonUtils.generateResume(
$('.priview_resume_container')[],
'测试'
)
}
},
components: {}
}
</script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export const generateResume = (el, name) => {
html2canvas(el).then(canvas => {
let contentWidth = canvas.width
let contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
let pageHeight = (contentWidth / 592.28) * 841.89
//未生成pdf的html页面高度
let leftHeight = contentHeight
//页面偏移
let position =
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = (592.28 / contentWidth) * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let pdf = new JsPDF('', 'pt', 'a4')
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', , , imgWidth, imgHeight)
} else {
while (leftHeight > ) {
//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
pdf.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
//避免添加空白页
if (leftHeight > ) {
//添加新页
pdf.addPage()
}
}
}
pdf.save(`${name}.pdf`)
})
}
欢迎关注公众号,进一步技术交流:
vue pdf下载的更多相关文章
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
高级进阶必读 你所不知道的系列,高级开发必掌握. JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理 ...
- Spring Boot 系列教程18-itext导出pdf下载
Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...
- 肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版
肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版 下载链接: https://u253469.ctfile.com/fs/253469-229815828
- pdf 下载demo
最近写了个pdf下载的demo,在这里记录一下.. 1 要下载pdf首先要有pdf 模板 ,制作pdf 模板就是 word 另存为 pdf . 2 用 Adobe Acrobat X Pro 这个软 ...
- [原]Jenkins(一)---我理解的jenkins是这样的(附全套PDF下载)
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5330 ...
- 蘑菇街支付架构 PDF 下载
蘑菇街支付架构 PDF 下载 下载地址:链接:https://pan.baidu.com/s/1ZffetaUhVMOzb9j2PSQJIQ 密码:iays http://www.java1234.c ...
- pdf 下载整理
pdf下载整理: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- swift user guide.pdf下载
日志以便日后查找.谢谢 1 Swift User Guide.pdf下载 http://download.csdn.net/detail/swifttrain/7442921 2 The Swift ...
- 码书:编码与解码的战争 PDF 下载
码书:编码与解码的战争 PDF 下载 下载地址:https://pan.baidu.com/s/14Y_krHh-unOv4g2KYFFDgQ 如需分享码:[打开微信]->[扫描右侧二维码]-& ...
随机推荐
- Spring Boot 多个域名指向同一IP
一.需求:直接通过域名访问首页(同一应用下,多个首页,包括PC端.手机端首页) 方法:采用多个域名绑定同一IP下同一应用,不同域名对应不同产品(PC.手机端)的方法,在后台通过拦截器判断 reques ...
- Scientific Toolworks Understand for linux
Scientific Toolworks Understand for linux 这个软件我找了很久了,一直没有找到合适能装的.现在这款能在linux上顺利运行的版本,共享给需要的TX们. 个人觉得 ...
- c#基础知识梳理(五)
上期回顾 - https://www.cnblogs.com/liu-jinxin/p/10831189.html 一.运算符重载 您可以重定义或重载 C# 中内置的运算符.因此,程序员也可以使用用户 ...
- python实现暴力破解
import urllib2 import urllib import cookielib import threading import sys import Queue from HTMLPars ...
- HotSpot JVM目录
一.知识结构整理 jvm体系大体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 二.运行时JVM结构组成及作用 http://www.cnblogs.com/imxi ...
- vue的自定义指令
点击元素之外触发函数 <template> <div v-clickoutside="clickItemOut"></div> </tem ...
- ztree在onCheck()方法中防止因触发联动关系导致页面多次渲染而卡死的问题
这几天在项目中遇到了要使用树形选择框, 而且要求比较复杂,具体叙述如下: 首先是有个选择框,左边选择是适用的商品,右边显示已经选择的商品.也就是说,左边每次勾选操作,都要触发一个事件去刷新右边的页面, ...
- HashMap、HashTable差异详解
HashMap和HashTable有什么不同?在面试和被面试的过程中,我问过也被问过这个问题,也见过了不少回答,今天决定写一写自己心目中的理想答案. 代码版本 JDK每一版本都在改进.本文讨论的Has ...
- Flutter——Expanded组件("可伸缩"组件)
Expanded组件可以结合Row和Column布局组件使用. Expanded组件的常用属性 属性 说明 flex 元素占整个父Row/Column的比例 child 子元素 import 'pac ...
- select函数的详细使用(C语言)
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect.accept.recv或recvfrom这样的阻塞程序( ...