JS将图片转pdf,jspdf的使用

这篇具有很好参考价值的文章主要介绍了JS将图片转pdf,jspdf的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Hi I’m Shendi

最近做转换工具,需要将图片转pdf,这里记录下来


JS将图片转pdf,jspdf的使用




简介

A library to generate PDFs in JavaScript.

一个用JavaScript生成PDF的库。



下载

在网站或github下载

https://parall.ax/products/jspdf

https://github.com/parallax/jsPDF

解压后在在页面内引入 dist 下的 jspdf.umd.min.js 文件



使用

官方文档是通过以下方式获取 jsPDF

import { jsPDF } from "jspdf";

但是我使用的是原生,找不到办法就只能自己摸索,首先是在控制台看有什么全局变量,发现有一个名称为 jspdf 的变量,这个变量下有一个名为 jsPDF 的函数,经过尝试,使用这个函数就可以获取到实例了

js 图片转pdf,javascript,pdf,开发语言



然后可以看官方文档说的进行尝试

js 图片转pdf,javascript,pdf,开发语言


var doc = jspdf.jsPDF();
doc.text("Hello world", 10, 10);
doc.save("生成.pdf");

执行后,会自动下载pdf文件,文件打开后内容效果如下

js 图片转pdf,javascript,pdf,开发语言



API文档: http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

这个API文档比较详细,但是网站有时候不稳定…可能因为墙的原因



添加图片

我的目的是将图片转pdf,找到了addImage函数,将图片写入pdf

api文档定义如下

(inner) addImage(imageData, format, x, y, width, height, alias, compression, rotation)

第一个参数为图片,可以为链接、字节等,第二个参数为图片格式,第三和第四代表图片编写到当前页的哪个位置,第五和第六代表绘制图片的宽高,更多的参考api文档


例如我将用户上传的图片加入pdf,file为上传的文件,sw.getObjectURL将文件转链接

var pdf = jspdf.jsPDF();
pdf.addImage(sw.getObjectURL(file), "jpeg", 0, 0);

效果如下

js 图片转pdf,javascript,pdf,开发语言



添加页

当内容超出pdf页的高度就需要新增一个页了

在api文档中可以轻易的找到一个名为 addPage 的函数,执行后保存,发现增加了一个pdf页面

js 图片转pdf,javascript,pdf,开发语言


添加页后默认当前页为添加的页面,定义如下

addPage(format, orientation)

其中format代表新建页的格式,默认为A4,还可以为

  • a0 - a10
  • b0 - b10
  • c0 - c10
  • dl
  • letter
  • government-letter
  • legal
  • junior-legal
  • ledger
  • tabloid
  • credit-card

如果需要自定义大小的话直接传递数组就可以了,例如宽200高500

addPage([200,500]);

第二个参数为方向,portrait(纵向),landscape(landscape),或缩写p,l


页面操作

有多页的话就需要有与之对应的操作,例如页面总数,切换页面等

在控制台中查看

js 图片转pdf,javascript,pdf,开发语言


其中 getNumberOfPages 是总页数,setPage 是设置当前操作哪一页,从1开始

还有 getPageWidth,getPageHeight 获取页宽高

setPageWidth,setPageHeight设置页面宽高,第一个参数为页下标,同setPage,从1开始,第二个参数为设置的值

要获取当前选择的是哪一页可以通过 getCurrentPageInfo 来得到当前页的信息,其中有一个 pageNumber 代表当前页数

知道了这些,就可以实现我的目的了



图片自适应

当图片过大会被遮住,所以直接将图片宽度设置为100%,高度根据图片宽高比来进行调整

这样只有高度超出的问题了


高度超过的话就将剩余部分放到第二页,比如一页的高度为100,图片的高度为220,那么总共有三页,第一页是展示图片的上100像素,第二页展示100-200的像素,第三页展示200-220的像素


这部分比较烧脑,只能做根据效果来调整,最终思路如下

记录两个信息,一个图片占用页面的高度(可能多页面),一个当前页面还剩多少高度(用于后面图片在其后位置添加)

计算图片可以占多少页,根据此来循环,代码如下

var pdf = jspdf.jsPDF();
var splitY = 0, splitHeight = 0,
    pageWidth = 210,
    pageHeight = 297;

pdf.setPageWidth(1, pageWidth);
pdf.setPageHeight(1, pageHeight);

// file是上传的文件files[0],有多个文件需要多次处理,这里只做示例
// 这个地方是我自己封装的读取图片文件的库(ShendiWeb),可以自己通过FileReader去读取
sw.readImg(file, function (img) {
    // 获取宽高比. 调整宽度让高度除以宽高比即可
    var ratio = img.width / img.height;
    var height = pageWidth / ratio;

    // 计算图片占多少页
    var num = parseInt((height + splitY) / pageHeight);
    for (var z = 0; z <= num; z++) {
        pdf.addImage(img, "jpeg", 0, splitY - splitHeight, pageWidth, height);
        if (height + splitY - splitHeight >= pageHeight) {
            pdf.addPage([pageWidth,pageHeight]);
            splitHeight += pageHeight - splitY;
            splitY = 0;
        } else {
            splitY = height % pageHeight;
            splitHeight = 0;
        }
    }
});

pdf.save();

我制作了两张图,宽度都为210,一张橙色高度400,一张灰色高度600,效果如下

js 图片转pdf,javascript,pdf,开发语言


这样我的目的就实现了




END文章来源地址https://www.toymoban.com/news/detail-521172.html

到了这里,关于JS将图片转pdf,jspdf的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PDF.js 前端开发使用指南

    PDF.js是一个用于在网页中显示PDF文档的JavaScript库。它是由Mozilla开发的,是一个完全免费、开源的工具。在本篇文章中,我们将详细介绍如何使用PDF.js进行前端开发,包括基本的使用方法、代码示例以及一些实用的技巧。 1. 安装 PDF.js 安装PDF.js有两种方法: 方法1:通过npm安装

    2024年02月08日
    浏览(49)
  • 批量打印-----jsPDF将图片转为pdf,并合并pdf

    安装依赖并引入 注意一、 使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类型不一致,需要将pdfA转为pdfB类型,才能合并,使用arraybuffer转,具体如下 注意二、 jspdf 可转pdf的图片类型有jpg、jpeg、png、bpm, 不支持 tif 和 tiff 图片类

    2024年02月13日
    浏览(45)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(59)
  • js下载图片、pdf等文件,无预览

    直接使用window.open()或window.locat.href()下载文件遇到图片或pdf文件就会跳转预览页,不能满足我想要的点击直接下载文件到本地的需求,尝试多次,最终通过以下方法实现了我的需求。 鉴于后端返回的是文件路径,首先要将文件url地址转为文件对象,代码如下: npm install saveA

    2024年02月13日
    浏览(44)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(52)
  • Print.js实现打印pdf,HTML,图片(可设置样式可分页)

    目录 一.安装及引入Print.js 二.介绍 三.常用配置 四.具体使用 一.安装及引入Print.js 1.安装 2.在需要使用的文件引入 二.介绍 Print.js有四种打印类型:\\\'pdf\\\'、\\\'html\\\'、\\\'image\\\'、\\\'json\\\'。 它的基本用法是调用printJS()并传入参数 三.常用配置 Print.js接受一个对象作为参数,在这里你可以配置

    2024年02月06日
    浏览(46)
  • html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示

        一、问题原因  对象存储的域名和你网址的域名不一样,此时用Canvas相关插件 将DOM元素转化为PDF,就会出现跨域错误。 二、解决办法  两步 1. 图片元素上设置属性  crossorigin=\\\"anonymous\\\"  支持原生img和eleme组件  2. 存储桶设置资源跨域访问 阿里腾讯云为例:↓ 阿里云OS

    2024年02月15日
    浏览(47)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • vue项目中,动态src引入图片,并且js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

    vue根据文件地址,获取后缀,根据后缀判断类型,然后根据类型动态展示不同类型的照片 1、处理后缀,根据后缀判断类型   2、根据返回的结果,直接将文件名命名为返回的结果,比如我有个图片类型的文件,经过上述的方法,返回的是image,那我直接要显示的图片名称就为

    2024年02月06日
    浏览(52)
  • pdf.js 使用介绍

    在网页中加载并显示PDF文件是最常见的业务需求。现在的浏览器大多数都自带pdf预览功能,但是每个浏览器的pdf加载器并不一样,工具栏也无法定制化,为了统一不同浏览器pdf预览的一致性,并增加一些自定义功能,我们使用pdf.js来实现pdf的预览。 pdf.js是一款非常优秀的pd

    2024年02月10日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包