使用js批量下载图片，并转为pdf 最后合并转word 可以复制内容

-SOLO-

已于 2024-04-17 09:33:43 修改

阅读量518

点赞数 4

文章标签： javascript pdf 服务器

于 2024-04-16 18:22:31 首次发布

本文链接：https://blog.csdn.net/qq_22706515/article/details/137834727

版权

下载图片的方法

说明imgUrls就是一个数组，保存了需要下载图片的url地址。

//下载方法
const downloadRes = async (url, name) => {
  let response = await fetch(url) // 内容转变成blob地址
  let blob = await response.blob() // 创建隐藏的可下载链接
  let objectUrl = window.URL.createObjectURL(blob)
  let a = document.createElement("a")
  a.href = objectUrl
  a.download = name
  a.click()
  a.remove()
}

//自动下载图片
imgUrls.forEach((url, index) => {
  setTimeout(() => {
    downloadRes(url, index+".jpg")
  }, 1000 * index)
})

效果

在这里插入图片描述

图片转pdf

这里借助的是nodejs。

需要安装两个库

用来实现图片转pdf

npm install puppeteer

合并的js，下面有两个参数
convertImagesToPDF(‘E:\ChromeDownLoad’, ‘E:\pdf\’)
第一个参数是图片保存的地方，如果用我上面的js保存的图片，图片将以下面的方式保存
在这里插入图片描述
我们的js代码也会按照0.jpg,1.jpg,2.jpg…的顺序生成，0.pdf,1.pdf,2.pdf…最后合并为merge.pdf。保存的位置为convertImagesToPDF方法第二个参数指定的地方。

生成的pdf（背景色为pdf软件自带的）
需要执行的js。可以保存为jpg2pdf.js

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');


async function convertImagesToPDF(imageDir, outputPDFPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 设置PDF页面大小  
  await page.setViewport({ width: 842, height: 595 }); // A4尺寸  

  // 读取图片目录中的图片文件  
  const imageFiles = fs.readdirSync(imageDir).filter(file => /\.jpg$/.test(file));

  // 对图片文件名进行排序  
  imageFiles.sort((a, b) => {
    const numA = parseInt(a.match(/(\d+)/)[0], 10);
    const numB = parseInt(b.match(/(\d+)/)[0], 10);
    return numA - numB;
  });

  // 初始化一个Buffer数组来收集所有页面的内容  
  const pdfBuffers = [];
  var index = 0;
  // 为每张图片创建一个PDF页面  
  let pdfFiles = [];
  const htmlTemp = `  
  <!DOCTYPE html>  
  <html>  
    <head>  
      <style>  
        body, html {  
          margin: 0;  
          padding: 0;  
          width: 100%;  
          height: 100%;  
        }  
        img {  
          width: auto;  
          height: 100%;  
          object-fit: cover;  
        }  
      </style>  
    </head>  
    <body>  
        <imgHolder>
    </body>  
  </html>  
`;
  let htmlContent = "";
  let pdfPath = outputPDFPath + "merge.pdf"
  for (const imageFile of imageFiles) {
    const imagePath = path.join(imageDir, imageFile);
    console.log(`Processing image: ${imagePath}`); // 打印当前处理的图片路径
    const page = await browser.newPage();
    // 设置视口大小（可选，根据图片大小调整）  
    await page.setViewport({ width: 800, height: 600 });

    pdfFiles.push(pdfPath);
    // 创建包含图片的 HTML 内容  
    htmlContent += `<p> <img src="${path.resolve(__dirname, imagePath)}" alt="Fullscreen Image">  </p>`;
  }
  // 将 HTML 内容写入临时文件  
  htmlContent = htmlTemp.replace("<imgHolder>", htmlContent);
  const tempHtmlFile = fs.createWriteStream('./temp.html');
  tempHtmlFile.write(htmlContent);
  await tempHtmlFile.end();

  // 打开临时文件并生成 PDF  
  await page.goto(`file://${path.resolve(__dirname, 'temp.html')}`, { waitUntil: 'networkidle0' });
  await page.pdf({ path: pdfPath, format: 'A4' }); // 可以根据需要调整格式  

  // 清理临时文件  
  fs.unlinkSync('./temp.html');
  // 关闭浏览器  
  await browser.close();

}


// 使用示例  
convertImagesToPDF('E:\\ChromeDownLoad', 'E:\\pdf\\')
  .then(() => console.log('PDF created successfully!'))
  .catch(err => console.error('Error:', err));

node js的执行

只需要在cmd中执行 node jpg2pdf.js 即可
在这里插入图片描述
需要把上面的jpg2pdf.js保存在node 保存包的地方。也就是我们在那个目录执行。node install xxx 就在那个目录执行 jpg2pdf.js 因为这个目录有node_modules文件夹，里面有我们安装的第三方包