HahahahiaZhang 2023-01-31 00:13 采纳率: 100%
浏览 154
已结题

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

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

  • 写回答

13条回答 默认 最新

  • Lingjie Fan 2023-01-31 05:44
    关注

    在前端 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')
      })
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(12条)

报告相同问题?

问题事件

  • 系统已结题 2月15日
  • 已采纳回答 2月7日
  • 修改了问题 2月1日
  • 创建了问题 1月31日

悬赏问题

  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 基于8255的交通灯设计
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力
  • ¥15 c语言题目:成绩管理系统