前端vue实现根据图片url生成pdf文件

获取到当前页面多个图片的url后，如何实现将这些图片转成一个pdf文件并下载呢？
只要前端，不要后端

在前端 vue 中实现根据图片 URL 生成 PDF 文件的基本流程如下：

安装并引入 PDF 生成库，例如 jspdf。
定义一个函数，用于生成 PDF 文件。
利用 JavaScript 的 Canvas API，将图片 URL 转换为图片数据。
利用 PDF 生成库，在 PDF 文件中添加图片数据。
利用 JavaScript 的 Blob API 或者 saveAs 库，将 PDF 文件保存到本地并下载。
下面是一个实现根据图片 URL 生成 PDF 文件并下载的代码示例：

// 1. 安装并引入 jspdf
import JsPDF from 'jspdf'

// 2. 定义生成 PDF 文件的函数
function generatePDF(imgUrls) {
  // 3. 利用 Canvas API 转换图片 URL 为图片数据
  const promises = imgUrls.map(url => {
    return new Promise(resolve => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const img = new Image()
      img.onload = function() {
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0)
        resolve(canvas.toDataURL('image/png'))
      }
      img.src = url
    })
  })

  // 4. 生成 PDF 文件
  Promise.all(promises).then(images => {
    const pdf = new JsPDF()
    images.forEach((image, i) => {
      pdf.addImage(image, 'PNG', 0, 0)
      if (i !== images.length - 1) {
        pdf.addPage()
      }
    })

    // 5. 下载 PDF 文件
    pdf.save('images.pdf')
  })
}

也可以将url连接提交到后台，在后台使用itext来生成对应的pdf文件，再生成响应流返回给前端组件。

这个pdf要看是前端合成还是后端
前端：可以借助pdf相关的js合成插件直接导出，取决于客户端性能可能会慢一点，不需要消耗服务器资源
后端：需要上传到服务器进行合成，速度快点但是会需要从服务器二次下载合成好的pdf文件会消耗服务器资源

可以使用 jsPDF 库实现：

1.安装jsPDF：npm install jspdf
2.引入jsPDF：import jsPDF from 'jspdf'
3.编写代码：

let pdf = new jsPDF();
let images = [url1, url2, ...];
images.forEach((image, index) => {
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    let img = new Image();
    img.src = image;
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);
        let imgData = canvas.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        if (index < images.length - 1) {
            pdf.addPage();
        } else {
            pdf.save("images.pdf");
        }
    };
});

推荐使用后端服务生成，前端调用就行了，非常简单，可以参考完整的案例

https://blog.csdn.net/xishining/article/details/127857301?spm=1001.2014.3001.5502

安装一个 jspdf 插件就可以了

想前端做就用jspdf之类的库，后端做的话直接调用

你好，可以参考下面这篇文章
https://www.cnblogs.com/architectforest/p/16488814.html

两种方式可以处理：

1、前端处理：引入jsPDF插件。
2、后端处理：将是由的图片地址传递到后端，后端读取图片，通过POI组件写入到PDF文件里面。

1.使用html2canvas

首先，需要引入html2canvas.min.js文件

<script src="https://unpkg.com/html2canvas@latest/dist/html2canvas.min.js"></script>

2.获取图片资源

在Vue项目中，可以使用axios获取图片资源：

this.$axios.get(url, {
  responseType: 'blob'
})
  .then(res => {
    const imgBlob = res.data
    this.getImgUrl(imgBlob)
  })
  .catch(() => {
    console.log('图片获取失败')
  })

3.将图片转换为base64格式

getImgUrl(blob) {
  const reader = new FileReader()
  reader.onload = e => {
    const imgUrl = e.target.result
    this.urlToImg(imgUrl)
  }
  reader.readAsDataURL(blob)
},

4.将图片转换为canvas

urlToImg(url) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.crossOrigin = ''
  img.src = url
  img.onload = () => {
    canvas.height = img.height
    canvas.width = img.width
    ctx.drawImage(img, 0, 0)
    this.makePdf(canvas)
  }
},

5.使用html2canvas将canvas转换为pdf

makePdf(canvas) {
  html2canvas(canvas, {
    allowTaint: true,
    useCORS: true
  }).then(canvas => {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    //一页pdf显示html页面生成的canvas高度;
    let pageHeight = contentWidth / 592.28 * 841.89
    //未生成pdf的html页面高度
    let leftHeight = contentHeight
    //页面偏移
    let position = 0
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 595.28
    let imgHeight = 592.28/contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let pdf = new jsPDF('', 'pt', 'a4')
    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage()
        }
      }
    }
    pdf.save('content.pdf')
  }
},

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇文章：vue 通过url下载pdf文件也许能够解决你的问题，你可以看下
除此之外, 这篇博客: 关于vue实现前端预览PDF文件中的 方法3 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
使用iframe、embed、object等窗口直接预览。然后调节下样式就行了…
然后直接就能预览了。貌似很香。貌似。。。。
然后你就会发现。当你的应用是移动app的时候。iframe窗体会自动跳转到pdf的网址。
当你一顿百度设置iframe的某个属性的时候。你会发现并不能解决。。。
像这样：

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

安装jsPDF：使用以下命令安装jsPDF：

npm install jspdf

引入jsPDF：在Vue文件中引入jsPDF：

import jsPDF from 'jspdf'

3.获取图片URL：在Vue组件中，使用以下代码获取图片URL：

let urls = [...]; // 图片URL数组

<template>
  <div>
    <button @click="generatePdf">生成PDF</button>
  </div>
</template>

<script>
import jsPDF from 'jspdf'

export default {
  methods: {
    generatePdf() {
      let urls = ['图片1的URL', '图片2的URL', '图片3的URL'];
      let pdf = new jsPDF();
      for (let i = 0; i < urls.length; i++) {
        let img = new Image();
        img.src = urls[i];
        pdf.addImage(img, 'PNG', 0, 0, 210, 297);
        if (i < urls.length - 1) {
          pdf.addPage();
        }
      }
      pdf.save('file.pdf');
    }
  }
}
</script>

给你个思路，前端可以用 jspdf 插件来实现，具体如何引入并使用非常简单，不难。