html页面根据分辨率缩放,html2Canvas根据不同分辨率,生成pdf内容自适应

根据屏幕大小不同,页面内容自适应并一页展示,应该如何实现

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

install (Vue, options) {

Vue.prototype.getPdf = function () {

setTimeout(() => {

var title = this.htmlTitle

let pdfDom_html = document.getElementsByClassName('pdfDom')

let PDF = new JsPDF('', 'pt', 'a4')

var imgArr = new Array();

let scale = 2 //获取像素密度的方法 (也可以采用自定义缩放比例)

for(var i = 0; i< pdfDom_html.length; i++) {

html2Canvas(pdfDom_html[i], {

useCORS: true,//允许加载跨域的图片

allowTaint: true,//允许跨域图片

scale: scale // 添加的scale 参数

}).then(function (canvas) {

let contentWidth = canvas.width

console.log(contentWidth, 'contentWidth')

let contentHeight = canvas.height

console.log(contentHeight, 'contentHeight')

//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高

let imgWidth = 595.28

let imgHeight = (592.28 / contentWidth * contentHeight)

console.log(imgHeight, 'imgHeight')

//返回图片dataURL,参数:图片格式和清晰度(0-1)

// let pageData = canvas.toDataURL('image/png', 1.0)

var pageData = new Image();

pageData.src = canvas.toDataURL('image/jpeg', 1.0);

imgArr.push(pageData)

if (imgArr.length == pdfDom_html.length) {

for(var j = 0; j < imgArr.length; j++) {

PDF.addImage(imgArr[j].src, 'JPEG', 0, 0, imgWidth, imgHeight)

if (j < imgArr.length - 1) {

PDF.addPage()

}

}

PDF.save(title + '.pdf')

}

})

}

}, 100)

}

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396716.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【agc002f】Leftmost Ball(动态规划)

【agc002f】Leftmost Ball&#xff08;动态规划&#xff09; 题面 atcoder洛谷 题解 我们从前往后依次把每个颜色按顺序来放&#xff0c;那么如果当前放的是某种颜色的第一个球&#xff0c;那么放的就会变成\(0\)号颜色&#xff0c;所以无论何时&#xff0c;\(0\)号颜色的数量不…

VS2010中的快捷键

一. VS2010中的快捷键 1&#xff1a; Ctrl Enter &#xff08;在光标指定位置的上 K C &#xff08;注释&#xff09; Ctrl E U &#xff08;取消注释&#xff09;  <>  Ctrl K U &#xff08;取消注释&#xff09; 5&#xff1a; Tab &#xff08;增加缩进&a…

export function函数传参_04 js高阶函数(惰性函数、柯里化函数、compose函数)和单例设计模式...

高阶函数的定义在《javascript设计模式和开发实践》中是这样定义的。函数可以作为参数被传递&#xff1b;函数可以作为返回值输出。结合这两个特点&#xff0c;首先想到的肯定是回调函数&#xff0c;回调函数也是高阶函数的一种&#xff0c;除了回调函数&#xff0c;还有很多的…

Javascript构造函数的继承

仅供学习参考&#xff0c;原文链接&#xff1a;http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html 今天要介绍的是&#xff0c;对象之间的"继承"的五种方法。 比如&#xff0c;现在有一个"动物"对象的构造函数。 funct…

python输入字符串str_python字符串(str)

#value "raitOrEi"#v value.capitalize()#首字母大写#print(v)#v1 v.casefold()#全部变小写&#xff0c;不只是英文的&#xff0c;其他语言特殊的大小写也变换#print(v1)#v2 v.lower()#只是英文变小写#print(v2)#设置宽度&#xff0c;并将内容居中#20 代指总长度…

html5 audio api 录音,如何使用HTML5 Web Audio API录制我的声音

在webkit浏览器上,您可以将get user media api与webkitGetUserMedia一起使用 – 如html5rocks所示.如果你想用你的声音来创建javascript事件(例如控制屏幕上的对象)你必须分析传入的声音(例如事件1的高频率 – 事件2的低频率,语音分析要复杂得多,见下文)另外,还有chrome的’x-w…

修改密码

在updateservlet.java中写了方法&#xff0c;修改用户密码&#xff0c;代码不成功求大神指教&#xff0c;代码如下&#xff1a; updateadminpw.jsp <% page contentType"text/html;charsetgb2312" pageEncoding"gb2312" %><% taglib uri"ht…

MlLib--逻辑回归笔记

批量梯度下降的逻辑回归可以参考这篇文章&#xff1a;http://blog.csdn.net/pakko/article/details/37878837 看了一些Scala语法后&#xff0c;打算看看MlLib的机器学习算法的并行化&#xff0c;那就是逻辑回归&#xff0c;找到package org.apache.spark.mllib.classification下…

mysql相关命令操作

2019独角兽企业重金招聘Python工程师标准>>> 远程连接容器中的mysql&#xff1a;mysql -h 192.168.5.116 -P 3306 -u root -p123456 启动mysql容器&#xff1a; $ sudo docker pull mysql:5.6.35 $ sudo docker run --name mysql -p 12345:3306 -e MYSQL_ROOT_PASSW…

html实体注册商标,html 注册商标,html 注册商标代码

html中注册的页面用什么标签写好对于html中的注册页面&#xff0c;策朋专业办理商标注册、专利申请、版权登记保护&#xff0c;需要一个表格。使用标签&#xff0c;输入和按钮标签来组合成就。使用html作为注册页面。实际上&#xff0c;只要您能达到期望的效果&#xff0c;它的…

java已知一个二叉树_#二叉树复习#

#二叉树复习#目录满二叉树完全二叉树平衡二叉树二叉树的主要性质--二叉树的度--二叉树的深度计算二叉树的遍历其他符号变量结点总数深度度为0的结点数/叶子结点数度为1的结点数度为2的结点数什么是满二叉树&#xff1f;二叉树每层的结点数为。满二叉树总结点数&#xff1a;。图…

hashtable - hashmap

http://www.importnew.com/24822.html转载于:https://www.cnblogs.com/qinqiu/p/9711147.html

java 反射机制_基础篇:深入解析JAVA反射机制

反射的概念java 的放射机制&#xff1a;在程序运行时&#xff0c;程序有能力获取一个类的所有方法和属性&#xff1b;并且对于任意一个对象&#xff0c;可以调用它的任意方法或者获取其属性通俗解析&#xff1a;java 文件需要编译成. class 文件才能被 jvm 加载使用, 对象的. c…

构建之法阅读笔记01

本学期阅读计划有两个&#xff0c;一个是《构建之法》&#xff0c;另一个是《大道至简》。 在快速阅读构建之法后&#xff0c;我想提一下几个问题&#xff1a; 1、软件程序软件工程&#xff0c;那么只会软件工程是怎样具体详细的将程序变成合格的软件的&#xff1f; 2、效能分析…

html div float center,跨浏览器实现float:center

跨浏览器实现float:center互联网 发布时间&#xff1a;2008-10-17 19:26:11 作者&#xff1a;佚名 我要评论原文&#xff1a;http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/我们都知道float…

博弈论中:纳什均衡、纯策略纳什均衡、混合策略纳什均衡、占优策略

纳什均衡 纳什均衡是由约翰福布斯纳什&#xff08;John Forbes Nash&#xff09;在20世纪50年代提出的博弈论概念&#xff0c;用于描述博弈中的一种稳定状态。在纳什均衡状态下&#xff0c;每个参与者都假定其他参与者的策略是已知的&#xff0c;他们选择的策略是最优的&#…

工具_HBuilder使用快捷方式

HBuilder常用快捷键大概共9类&#xff08;【4 13 3】文件、编辑、插入&#xff1b;【4 9 8】选择、跳转、查找&#xff1b;【1 1 6】运行、工具、视图&#xff09; 1.文件(4) 新建 Ctrl N 关闭 Ctrl F4 全部关闭 Ctrl Shift F4 属性 Alt Enter 2.编辑(13) 激活代码助…

oracle左连接没用_一周零基础学完Oracle数据库第三天02

四、 多表查询1 什么是多表查询多表查询&#xff1a;当查询的数据并不是来源一个表时&#xff0c;需要使用多表链接操作完成查询。根据 不同表中的数据之间的关系查询相关联的数据。多表链接方式&#xff1a; 内连接&#xff1a;连接两个表&#xff0c;通过相等或不等判断链接列…

weblogic启动项目报错找不到类_启动类报错是经常出现的事但是单一的从一个地方找原因会越找越错...

Error starting ApplicationContext. To display the conditions report rerun your application with debug enabled.当我们看到这个报错的时候有的说是jar包重复&#xff0c;有的说是Controller包和Application包处于平行位置&#xff0c;还有的觉得是RequestMapping的valu…

fis

fis3实时刷新 npm install -g fis3 进入相关目录 发布&#xff1a; fis3 release 启动&#xff1a; fis3 server start // 服务启动后&#xff0c;会一直存在&#xff0c;重启或者fis3 server stop 才会关闭服务 自动刷新 fis3 release -wL关闭服务 fis3 server stop …