多个多页PDF转base64图片并合为一张大图

最新推荐文章于 2025-04-25 12:43:48 发布

原创

最新推荐文章于 2025-04-25 12:43:48 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #js #javascript

本文将介绍如何在Vue前端应用中，利用JavaScript库将多页PDF转换为Base64编码的图片，并进一步将这些图片合并成一张大图，以供展示或下载。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
	<title>pdf转图片</title>

</head>
<style>
	#pop {
   
   
		position: fixed;
		width: 1404px;
		left: 100%;
	}


</style>

<body>
	 <div id="pop"></div>
   <div class="loding" style="font-size: 1.3em; margin: 100px auto; width: 100%; display: block; text-align: center">
    <div>请不要关闭当前窗口，正在为您合并PDF并生成图片...</div>
    <div>请耐心等候15秒左右</div>
  </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lukesyy/Html-Pdf-MultiInOne@main/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lukesyy/Html-Pdf-MultiInOne@main/build/pdf.worker.js"></script>
<script>
	//  ！！！！！！把你的pdf地址们 放到这个数组中就不用管了！！！！！！！！！！！！！！！
	let pdfUrlArr = [
		'https://lawkehyt.oss-cn-beijing.aliyuncs.com/%E6%9C%B1%E4%BA%91%E4%B8%AD_bbefa.pdf',
		'https://lawkehyt.oss-cn-beijing.aliyuncs.com/%E6%9C%B1%E4%BA%91%E4%B8%AD_bbefa.pdf',
		'https://lawkehyt.oss-cn-beijing.aliyuncs.com/%E6%9C%B1%E4%BA%91%E4%B8%AD_bbefa.pdf',
		'https://lawkehyt.oss-cn-beijing.aliyuncs.com/%E6%9C%B1%E4%BA%91%E4%B8%AD_bbefa.pdf',
		'https://lawkehyt.oss-cn-beijing.aliyuncs.com/%E6%9C%B1%E4%BA%91%E4%B8%AD_bbefa.pdf',

最低0.47元/天解锁文章