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

前端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')
      })
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 夜郎king 2022博客之星IT其它领域TOP 12 2023-01-31 08:28
    关注

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

    评论
  • Haven55555 2023-01-31 09:30
    关注

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

    评论
  • hurp13 2023-01-31 09:37
    关注

    可以使用 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");
            }
        };
    });
    
    
    
    评论
  • IT技术分享社区 数据库领域优质创作者 2023-01-31 09:41
    关注

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

    评论
  • 曾经的你d 2023-01-31 10:59
    关注

    安装一个 jspdf 插件就可以了

    评论
  • ClaireKe 2023-01-31 12:08
    关注

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

    评论
  • coderYYY 前端领域新星创作者 2023-01-31 15:19
    关注

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

    评论
  • 朱友斌 2023-01-31 18:58
    关注

    两种方式可以处理:

    • 1、前端处理:引入jsPDF插件。
    • 2、后端处理:将是由的图片地址传递到后端,后端读取图片,通过POI组件写入到PDF文件里面。
    评论
  • 紫荆桥下 2023-02-02 11:11
    关注

    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')
      }
    },
    
    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-02 14:36
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 这篇文章:vue 通过url下载pdf文件 也许能够解决你的问题,你可以看下
    • 除此之外, 这篇博客: 关于vue实现前端预览PDF文件中的 方法3 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

      使用iframe、embed、object等窗口直接预览。然后调节下样式就行了…
      然后直接就能预览了。貌似很香。貌似。。。。
      然后你就会发现。当你的应用是移动app的时候。iframe窗体会自动跳转到pdf的网址。
      当你一顿百度设置iframe的某个属性的时候。你会发现并不能解决。。。
      像这样:
      在这里插入图片描述


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论
  • m0_59289843 2023-02-05 09:15
    关注
    1. 安装jsPDF:使用以下命令安装jsPDF:
    npm install jspdf
    
    1. 引入jsPDF:在Vue文件中引入jsPDF:
    import jsPDF from 'jspdf'
    
    

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

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

    4.

    <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>
    
    
    评论
  • bug菌¹ Java领域优质创作者 2023-02-06 11:17
    关注

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

    评论
查看更多回答(12条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥20 springboot博客系统
  • ¥15 关于#c++#的问题:在A和B类中应该怎么定义复制构造函数来避开unordered_set复制构造的问题(相关搜索:头文件)
  • ¥15 MICE包多重插补后数据集汇总导出
  • ¥15 一道算法分析问题(关于3-MSAT)
  • ¥15 C++ FLUENT 化学反应速率 编写困难
  • ¥15 Python嵌套交叉验证
  • ¥15 linuxkit+elasticsearch
  • ¥15 兄得萌6.13do题😭😭大一小东西的work
  • ¥15 投不到原始数据,gdal投影代码
  • ¥20 卷积混响的代码帮写。。