这是一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件。但是除了图片之外,其他文件不可以在此处转换为 PDF。我使用 HTML 添加了不同的元素并创建了一个输入框来选择图像。

我们从 HTML 中获得不同类型的输入。其中之一是文件。文件输入将帮助你从设备中选择任何文件。这里我们仅用 = ".png, .jpg, .jpeg"选择接受输入中的图像,因此只能选择这些图片。

JavaScript 实现图片转 PDF

在线演示地址

如你所见,已在渐变背景上创建了一个框。首先,这个盒子有一个小显示器。你可以在该框中看到选定的图像。这将使你知道要转换为 PDF 的图像。

但是,这里的问题是你不能一次选择多个图像。PDF 文件将由图像创建。

如何使用 JavaScript 将图像转换为 pdf ?这个PDF转换器有两个按钮。一键选择图片,一键转换并下载为 PDF 文件。

当你单击上传或选择按钮时,你可以从设备中选择任何图像。当你点击下载按钮时,你的图像将被转换为 PDF 并下载。使用很少的 HTML、CSS 和 JavaScript 就可以很容易地构建。

第一步: PDF Converter的基本结构

项目的基本结构是使用以下 HTML 和 CSS 创建的。首先,为网页添加了渐变背景色。然后创建盒子。

<div class="container">

</div>
*,
*:after,
*:before{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

body{
 font-family: arial;
 font-size: 16px;
 margin: 0;
 background: linear-gradient(133deg, #4abeb2, #3c57d2);
 color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
}

.container{
  background: white;
  width: 450px;
  padding: 30px;
  border-radius: 5px;
}

第二步: 图片预览框

现在已经创建了一个可以查看图像的区域。这意味着可以在此处看到你将选择转换为 PDF 的图像的预览。这个盒子使用最大宽度:400px和最小高度:200px.

<img id="showImg" src="images/img.png">
#showImg{
 display: block;
 margin: 0 auto;
 max-width: 400px;
 min-height: 200px;
 background: #174353;
 border-radius: 5px;
}

第 3 步: 图像到 PDF 转换器的按钮

现在已经创建了两个按钮。第一个按钮是使用输入创建的,它将基本上选择文件。第二个按钮下载 PDF 文件。

 <div class="button">
   <div class="upload">
    <input type="file" onChange="loadFile(event)" name="" accept=".png, .jpg, .jpeg">
    上传图片
  </div>
	<button onClick="pdfDown()">下载PDF</button>
</div>
input{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 z-index: 1;
}

.button{
  display: flex;
}
button,.upload{
 width: 220px;
 margin: 50px 20px 10px 20px ;
 text-align: center;
 position: relative;
 padding: 10px 5px;
 font-size: 17px;
 outline: none;
 color: #fff;
 border: none;
 background-color: #023780;
 border-radius: 5px;
 display: block;
}

.upload{
 background: #a74901;
}

第 4 步: 在 JavaScript 中实现图片转换到 PDF

现在是时候使用 JavaScript 实现图片到 PDF 的转换了。

var newImage, showImg;
function loadFile(event) {
  showImg = document.getElementById('showImg');
  showImg.src = URL.createObjectURL(event.target.files[0]);

  newImage = document.createElement('img');
  newImage.src = URL.createObjectURL(event.target.files[0]);

  showImg.onload = function() {
    URL.revokeObjectURL(showImg.src) 
}
};

function pdfDown(){
  console.log(newImage)
  var doc = new jsPDF();
  doc.addImage(newImage,10,10);
  doc.save('ImgToPDF.pdf')
}

到此这篇关于基于JavaScript编写一个图片转PDF转换器的文章就介绍到这了,更多相关JavaScript 图片转PDF内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

基于JavaScript编写一个图片转PDF转换器的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios – 将PDF文件附加到电子邮件 – Swift

    我想发送带有PDF附件的电子邮件.我创建了PDF文件,然后我做了以下哪些错误我相信:在发送电子邮件之前,我可以看到附带的chart.pdf,但是当我发送电子邮件时,它是在没有附件的情况下发送的,这是因为我没有正确附加文件.解决方法您将错误的mimeType传递给addAttachmentData().使用application/pdf而不是pdf.

  6. xcode – 无法在iOS8beta5中使用UIWebView打开PDF文件

    如果是,请提供一些示例代码.解决方法我找到了一种在WebView中查看PDF的解决方法

  7. iOS从UIWebview内容创建pdf

    哪个是从webview内容中获取最佳质量pdf文档的最佳选择?

  8. ios – 在Swift中将图像合并为PDF

    我想创建一个应用程序,要求用户从设备相机上传图片,然后使用swift将这些图像合并为PDF.怎么能实现这一目标?

  9. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  10. 我们可以在IOS应用程序的UIWebview中将条款和条件作为PDF加载吗?

    我在UIWebview中向我的应用添加了条款和条件.我真正想知道的是,我可以将其显示为逐页的pdf文档,还是应该使用任何其他方法?App商店会接受pdf格式吗?解决方法是的,这可以使用UIWebview完成,肯定会被Apple接受.如果您尝试从WebURL显示PDF文件,请使用以下代码.或者,如果您的应用程序中捆绑了PDF文件,请使用以下代码.

随机推荐

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  3. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  5. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  6. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  7. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  8. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

  10. jQuery实现简单的抽奖游戏

    这篇文章主要为大家详细介绍了jQuery实现简单的抽奖游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部