pdf转换成html后打印不清晰,Javascript实现html转pdf高清版（提高分辨率）

刺骨的言语ヽ痛彻心扉 2022-10-05 11:58 561阅读 0赞

网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰，今天为大家介绍如何提高js实现html转pdf的清晰度

引入js文件

https://cdn.bootcss.com/jquery/3.4.1/jquery.js

https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js

https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js

注意事项：

1.生成的pdf中，dom元素间距异常；

2.提高分辨率后，生成的图片有偏差；

html语句：

...

JS代码：

download()\{

var element = $("\#demo"); // 这个dom元素是要导出pdf的div容器

var w = element.width(); // 获得该容器的宽

var h = element.height(); // 获得该容器的高

var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离

var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离

var canvas = document.createElement("canvas");

var abs = 0;

var win\_i = $(window).width(); // 获得当前可视窗口的宽度(不包含滚动条)

var win\_o = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)

if(win\_o>win\_i)\{

abs = (win\_o - win\_i)/2; // 获得滚动条长度的一半

\}

canvas.width = w \* 2; // 将画布宽&&高放大两倍

canvas.height = h \* 2;

var context = canvas.getContext("2d");

context.scale(2, 2);

context.translate(-offsetLeft-abs,-offsetTop);

// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此

// translate的时候，要把这个差值去掉

html2canvas(element).then(function(canvas) \{

var contentWidth = canvas.width;

var contentHeight = canvas.height;

//一页pdf显示html页面生成的canvas高度;

var pageHeight = contentWidth / 592.28 \* 841.89;

//未生成pdf的html页面高度

var leftHeight = contentHeight;

//页面偏移

var position = 0;

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

var imgWidth = 595.28;

var imgHeight = 592.28/contentWidth \* contentHeight;

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

var pdf = new jsPDF('', 'pt', 'a4');

//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

//当内容未超过pdf一页显示的范围，无需分页

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('我的简历.pdf');

\})

\}

更多关于Javascript将html转成pdf的文章请大家点击下面的相关链接

发表评论取消回复

表情：

评论列表（有 0 条评论，561人围观）

还没有评论，来说两句吧...

相关阅读

相关 php 将网页转成pdf_利用PHP将HTML页面转换成PDF文件

利用PHP将HTML页面转换成PDF文件发布时间：2020-12-18 15:50:29 来源：亿速云阅读：86 作者：Leah 本篇文章为大家展示了利用PHP将

忘是亡心i/ 2022年11月12日 05:23/ 0 赞/ 540 阅读

相关 html文件转换成.vue_PDF文件如何转换成HTML？

大家都知道HTML是网页的通用语言，用处也比较多。有很多小伙伴想要将PDF文件转换成HTML超文本标记语言，但是不知道应该如何转换，那么今天我就来教教大家如何转换。不会的小伙伴

朴灿烈づ我的快乐病毒、/ 2022年10月26日 12:46/ 0 赞/ 439 阅读

相关 html标签元素类型，分享PDF高清版

逻辑运算符 JavaScript中有三个逻辑运算符，&&与、||或、!非。 JavaScript 中的逻辑运算符可用来确定变量或者是值之间的逻辑关系。通常用于布尔型值，

矫情吗；*/ 2022年10月18日 01:44/ 0 赞/ 155 阅读

相关飞翔pdf生成html,pdf转换成html转换器

pdf转换成HTML转换器是一款pdf转换工具，可以把pdf格式文件转换为html文件，直接在浏览器中浏览。pdf转换成HTML转换器支持批量转换，并且界面简单，功能稳定使

电玩女神/ 2022年10月06日 11:58/ 0 赞/ 187 阅读

相关 libreoffice转换html,LibreOffice 转成pdf与html格式，实现在线预览

importjava.io.File;importjava.io.IOException;importjava.io.InputStream;importorg.apache.

你的名字/ 2022年10月05日 15:56/ 0 赞/ 355 阅读

相关 pdf转换成html后打印不清晰,Javascript实现html转pdf高清版（提高分辨率）

网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰，今天为大家介绍如何提高js实现html转pdf的清晰度引入js文件 https://cdn.b

刺骨的言语ヽ痛彻心扉/ 2022年10月05日 11:58/ 0 赞/ 562 阅读

相关 html转换为PDF

<!DOCTYPE html> <html> <head> <title>test</title> <meta http-equiv="Cont

我会带着你远行/ 2022年05月22日 13:10/ 0 赞/ 263 阅读

相关 html 转 pdf

private static String getWEB_INF(){ if(PdfUtl== null ){ PdfUtl =new Pdf

骑猪看日落/ 2022年05月22日 12:43/ 0 赞/ 223 阅读

相关 HTML转PDF

最近又用到HTML转PDF的功能，而且需要对PDF进行定制，需要页眉页脚的经过调查最终还是感觉wkhtmltopdf比较好，中间还经历了使用Google浏览器直接转pdf

向右看齐/ 2021年09月23日 05:58/ 0 赞/ 418 阅读

相关 html转pdf

html转PDF的软件 wkhtmltopdf 官方网站：[https://wkhtmltopdf.org/][https_wkhtmltopdf.org] [https

本是古典何须时尚/ 2021年07月25日 18:07/ 0 赞/ 513 阅读