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)

}

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

html页面导出pdf截断问题,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案...
欢迎关注我的公众号 <人生代码> 我有一个大胆的想法,我要一直写到死,那一天我不写了,可能就死了.哈哈. 哈喽,大家好,我是你们的攻城狮,人贱人爱的 Ken,一个永远充满激情的人. 最近接 ...
HTML页面实现可编辑，保存，并生成PDF，完成签章。
原本是应该用pageOffice实现在线打开word的编辑,保存,转换成PDF,并完成签章,由于公司预算不够,pageOffice组件不能购买,所以只能另想他法. 需要编辑的word文档的模板是固定的 ...
大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）
前言本文以width和height代表实际窗口的宽和高,且下文的overflow: hidden几乎不会隐藏什么东西,这么写只是一个保障. 一.按分辨率进行缩放实现效果:无论如何拖拽浏览器窗口,都 ...
大屏网页手机缩放html,大屏页面三种缩放
(1)按分辨率进行缩放 html,body{ margin: 0; padding: 0; font-size: 16px; overflow: hidden; font-family: " ...
前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏
提示:前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏说明一.首先是适配屏幕的缩放比 1. ...
前端解决web端 125%，150%缩放，1366*768分辨率兼容问题
最近做一个需求是在web项目中打开一个新的标签页,新的标签页是要适应大屏的,但是同时要适应125%,150%缩放,1366*768分辨率兼容.所以单独对这个页面进行了兼容处理 mounted () { ...
[html] 写页面布局时你有考虑过分辨率因素吗？还要考虑哪些因素呢
[html] 写页面布局时你有考虑过分辨率因素吗?还要考虑哪些因素呢 1.支持的最大和最小分辨率 2.流式布局还是响应式布局个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定 ...
ubuntu 外接显示器设置鼠标指针闪烁屏幕缩放相对位置设置分辨率设置 -xrandr
配置:通过 xrandr 直接查看笔记本电脑最高分辨率 2880x1800 外接的显示器最高分辨率 1920x1200 场景:笔记本电脑外接显示器,左边为外接显示器,右边为笔记本电脑 #! /b ...
LabVIEW自适应屏幕分辨率缩放
文章目录前言一.子vi百度网盘自取二.子vi使用方法三.窗口大小设置四.总结前言在使用 LabVIEW进行上位机项目开发的时候软件的分辨率是根据我们所开发的电脑所决定的,但是当开发完的上 ...

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

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

最新文章

热门文章