基于PDF和JSPDF实现调整pdf文件大小功能

最新推荐文章于 2024-07-29 22:16:11 发布
最新推荐文章于 2024-07-29 22:16:11 发布
阅读量6.7k 收藏 4
点赞数
文章标签： javascript 开发语言 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbkhbk907/article/details/121150485
版权
本文介绍了如何在不依赖外部工具或在线服务的情况下，通过JavaScript实现PDF文件大小的压缩。首先利用pdf.js展示PDF并调整页面比例，然后使用JSPDF将canvas转换为PDF，通过调整canvas尺寸实现PDF压缩。在实现过程中遇到了预览限制和延迟加载的问题，通过修改viewer.js参数和异步翻页解决，最终成功生成压缩后的PDF文件。
摘要由CSDN通过智能技术生成

        前些日子由于工作需要需要将pdf文件变小，市面上不少软件都有这个功能，但都不属于免费功能。此外部分网站提供免费的在线压缩功能，但是考虑到文件比较重要，使用在线压缩存在文件泄漏风险，所以萌发了自己写一个基于html页面压缩pdf大小页面的念头。

        在不借助软件和工具的情况下，我能想到压缩方案是将pdf每一页截图然后通过调整图片像素的方法，来实现pdf压缩，而该过程也是我后面实现的思路。网上搜索场景的pdf压缩方案是基于jspdf.js将canvas转成图片生成pdf文件，通过调整生成图片时候的尺寸来实现pdf文件大小调整的功能。

        将整个任务分解，可以分为两个部分：

                1.将pdf展示在页面上；

                2.将页面上展示的pdf压缩大小重新生成pdf；

        通过一番搜索，第一步选定借助pdf.js来展示页面，由于本人前端水平有限，最终页面整个采用pdfjs在github上的模板（Getting Started (mozilla.github.io)）。该样例页面提供了pdf在线预览、打印、下载等功能，同时支持在线预览调整页面比例，完美的匹配了第一步的要求，由于浏览器支持问题，我选择的是pdfjs-2.10.377-legacy-dist版本。

        第二步是在页面中引入jspdf，来实现将canvas标签转化为pdf文件。由于jspdf在github上的最新源码ES6模块部署，这

最低0.47元/天 解锁文章
hbkhbk907
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
jspdf与zip.js结合。解决转pdf文件清晰度与文件过大的问题
追逐丶的博客
12-14 1万+
jspdf与zip.js结合。解决转pdf文件过大的问题一、问题产生：使用jspdf转换html到pdf清晰度不够二、问题解决：在jspdf.debug.js源代码中下载部分集成zip.js 一、问题产生：使用jspdf转换html到pdf清晰度不够 本人使用jspdf+html2canvas 清晰度达不到要求。采用放大画板，增加清晰度。但是与此同时生成的pdf文件过大，导致客户不满意。偶然发现使......
设置pdf的放大缩小
weixin_42440314的博客
03-17 1433
<template> <div class="view"> <!-- <template v-for="item in pageNum" :key="item"> --> <!-- :id="`pdf-canvas-${item}`" --> <canvas id="pdf-canvas" class="pdf-page" @touchstart="touchstart"
记录一下使用PDFJS遇到的坑
最新发布
m0_63057114的博客
07-29 1759
在引用PDFjs的过程中，遇到了一下坑，这这里记录一下。列如：1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.和禁用按钮功能等...
Javascript开发之js压缩篇.pdf
11-16
Javascript开发之js压缩篇.pdf
vue new JSPDF自定义pdf大小
break_return的博客
05-27 6287
// 导出页面为PDF格式 import html2canvas from 'html2canvas' import JSPDF from 'jspdf' export function ExportSavePdf(htmlTitle, currentTime) { var element = document.getElementById('pdfCentent') html2canvas(element, { logging: false }).then(function(can.
pdf.js压缩文件
08-07
该文件是pdf.js Stable(v1.7.225)压缩文件。
pdf_js1.9.4最新压缩使用版
12-04
pdfjs最新使用版，压缩包。可用于js快速查看Pdf文件，纯js代码。
jsPDF打印超长内容
10-30
修改了html2canvas的bug，使其支持打印超长内容，进而可以使用jspdf打印为pdf文档
jsPDF-master js网页查看PDF插件，支持多个浏览器，可以自定义显示大小
11-04
此外，jsPDF社区提供了丰富的插件和示例代码，可以帮助开发者实现更多自定义功能。 总的来说，jsPDF是一个强大且灵活的JavaScript库，对于需要在网页上生成和展示PDF的开发者来说，它提供了一个方便、高效且兼容性...
jsPDF插件分享，将Html转PDF文件
05-27
jsPDF是一个轻量级的JavaScript库，它允许开发者在浏览器环境中生成PDF文件，其中包括了将HTML转换为PDF的功能。本篇文章将深入探讨jsPDF插件的工作原理、使用方法以及常见问题。 ### 一、jsPDF简介 jsPDF是由...
jsPDF(用 JS 生成 PDF).zip
07-13
jsPDF 是一个免费的 JavaScript 类库，可以用来创建 PDF 文件，不需要服务器端支持。它支持文本（含格式），画图和图片。       jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。       客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。
jspdf实现JavaScript显示pdf文档可分页
03-30
jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码jspdf源代码
实现PDF在线预览，并可以支持手势放大缩小
08-28
注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。 svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案 canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf
基于Phantomjs生成PDF的实现方法
10-21
Phantomjs通过创建一个`webpage`对象来加载HTML页面，然后设置纸张大小、方向和边距等参数，最后调用`page.render(output)`方法将渲染后的页面保存为PDF文件。这个过程可以理解为浏览器在后台打开网页，然后将其...
html2canvas.js 和 jspdf.debug.js
10-18
此外，jspdf还提供了对压缩PDF的支持，以减小文件大小。 结合使用HTML2canvas.js 和 jspdf.debug.js 的典型流程如下： 1. 首先，引入html2canvas.js库，遍历需要转换的HTML部分，并使用html2canvas生成Canvas元素...
pdf.js 设置默认缩放
qq_38508172的博客
12-21 1170
然后把"auto"设置成你想要默认的缩放，需要注意的是。如果设置成100%得话，不能设置为1。其他的什么200%、300%、400%得写法也如上。然后在哪里找到下面这段代码。
使用 jsPDF 创建 PDF 文档
allway2的博客
11-28 4304
介绍 在上一篇文章使用 PDF.js 库显示 PDF 文件中，我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用jsPDF图书馆为此目的。您可以仅从GitHub 存储库下载最新的库版本或者从官网.不幸的是，该库的文档很差，所以我们将描述最重要的 API。 先决条件 我们必须下载最新版本的库并将其包含在 HEAD 或 BODY 部分的末尾。 <head> <script src="js/jspdf.js"&.
PDF.js如何添加放大缩小的功能，转换成图片应该如何实现？
孙叫兽的博客
09-22 2970
把官方的安装包搞下来，自己的PDF文件及index.html添加进去，上面的目录结构是未添加的，我先把PDF文件搞成canvas然后搞成图片，然后再图片上添加按钮对图片进行放大缩小操作，方便对用户行为进行录屏。 <!DOCTYPE HTML> <html data-dpr="1" style="font-size: 37.5px;"> <head> <meta charset="UTF-8"> <meta name="viewport" co..
html2canvs 和 jspdf 下载pdf文件为黑色的
06-08
如果使用 HTML2Canvas 和 jspdf 下载的 PDF 文件出现黑色的情况，可能是因为浏览器对于 Canvas 中的透明度处理方式不同导致的。这种情况下，可以尝试以下解决方案： 1. 修改 HTML2Canvas 的配置，禁用 Canvas 的背景透明度。 ``` html2canvas(document.body, { backgroundColor: null, // 禁用 Canvas 的背景透明度 // 其他配置项 }).then(function(canvas) { // 将 Canvas 转换成 PDF }); ``` 2. 使用 jspdf 的 addImage 方法，将 Canvas 转换成图片后再添加到 PDF 中。 ``` html2canvas(document.body, { // 其他配置项 }).then(function(canvas) { var imgData = canvas.toDataURL('image/jpeg'); var pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0); pdf.save('filename.pdf'); }); ``` 使用以上解决方案，可以解决 HTML2Canvas 和 jspdf 下载的 PDF 文件为黑色的问题。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值