【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样

问题：使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样，在mac下，一切正常，看起来很舒服，但是当我把页面放在扩展屏幕下（27寸），再生成一个pdf，虽然排版一样，但是文字就变得非常小

下面的是在mac下的，上面是在扩展屏幕下的，最开始我以为是文字大小问题，我是一直在扩展屏幕上进行测试的，但我把页面拖拽回mac上时，我发现生成的pdf是正常的，这时我就猜测应该不是文字大小的问题

尝试：将canvas打印出来

const pdfContent = document.querySelector('.pdf-content')
html2canvas(pdfContent).then((canvas) => {console.log(canvas)
})

打印结果就是 canvas的 height 和 width在不同屏幕上时不一样的，这个时候我设置了html2canvas的属性

html2canvas(pdfContent, {width: 1407,height: 936
}).then((canvas) => {console.log(canvas)
})

数据具体怎么来的下面再说，然后打印预览发现

图片没有撑满，还是不对
真正影响截取的图片宽高的时 Window.innerWidth 这个属性
这个属性可以通过 ownerDocument.defaultView.innerHeight来获取，当我们打印出来 ownerDocument.defaultView这个属性，发现里面有 innerHeight 和 innerWidth 这两个属性，在mac上打印预览正常下的这两个属性值宽为1407 高为936，那就将这两个属性写死，就可以保证在所有屏幕下渲染出来的图片都是一致的

完整代码

const generatePDF = () => {if (haveData.value == true) {const pdfContent = document.querySelector('.pdf-content')console.log(pdfContent.ownerDocument.defaultView)pdfContent.ownerDocument.defaultView.innerHeight = 936 pdfContent.ownerDocument.defaultView.innerWidth = 1407pdfContent.ownerDocument.defaultView.devicePixelRatio = 2html2canvas(pdfContent).then((canvas) => {console.log(canvas)const imgData = canvas.toDataURL('image/png', 1.0)const pdf = new jsPDF('p', 'mm', 'a4')const a4w = 190; const a4h = 277pdf.addImage(imgData, 'PNG', 10, 10, a4w, Math.min(a4h, a4w * canvas.height / canvas.width))pdf.setFontSize(20)pdf.save(`${valueMonth.value}月报.pdf`)})} else {message.warning('本月暂无数据可导出')}
}

这样就可以在任何屏幕下得到相同大小和相同文字大小的 pdf了

【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样相关推荐

前端使用html2canvas和jspdf生成pdf，以及清晰度问题
前端使用html2canvas和jspdf生成pdf 参考文档:https://www.jianshu.com/p/56680ce1cc97 html2canvas 官网:http://html2ca ...
jspdf 分页_使用html2canvas跟jspdf导出导出PDF文件
前言:最近项目中有将html文件导出PDF需求,了解网上有jspdf,whtmltopdf等方法. 由于whtmltopdf需要在服务端安装whtmltopdf,为了简便,选择了js方法. 需要插件: ...
c语言输运方程1001无标题,粒子输运方程确定论计算手段.pdf
第 3l卷第2期计算物理 V01．31．NO．2 2Ol4年 3月 CHINESEJOURNALOFCOMPUTATIONALPHYSICS Mar．．2014 文章编号:1001-246X ...
【无标题】rstudio绘制的图形导出pdf不显示文字内容，导出png正常显示
问题: 之前绘制一个热图的时候,发现导出pdf的时候居然不显示文字!但是导出png的时候又是是正常显示的.我就纳闷了,如图所示: csdn自带的编辑器不太会调整,各位见谅将就着看哈. 原因: (手动狗 ...
html页面导出pdf截断问题,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案...
欢迎关注我的公众号 <人生代码> 我有一个大胆的想法,我要一直写到死,那一天我不写了,可能就死了.哈哈. 哈喽,大家好,我是你们的攻城狮,人贱人爱的 Ken,一个永远充满激情的人. 最近接 ...
html2Canvas+JsPDF生成pdf文件并下载
采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载 1.安装html2Canvas: npm install html2canvas 2.安装JsPDF: npm in ...
html转换pdf 分页,(html2canvas jspdf)html转pdf带分页
1.下载npm包 npm i html2canvas jspdf -s 2.页面引入 import html2canvas from 'html2canvas'; import jsPDF from ...
Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）
最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/... html ...
Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档在上面搭建起 ...

【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样

【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样相关推荐

最新文章

热门文章