vue.js3:多张图片转pdf(jspdf@2.5.1 / vue@3.2.37)

一，安装jspdf库:

1,地址:

https://github.com/parallax/jsPDF

2,安装:

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm install jspdf --save
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vue/babel-preset-jsx@1.3.0
npm WARN Found: vue@3.2.37
npm WARN node_modules/vue
npm WARN   peerOptional vue@"^2 || ^3.2.13" from @vue/babel-preset-app@5.0.8
npm WARN   node_modules/@vue/babel-preset-app
npm WARN     @vue/babel-preset-app@"^5.0.8" from @vue/cli-plugin-babel@5.0.8
npm WARN     node_modules/@vue/cli-plugin-babel
npm WARN   2 more (@vue/server-renderer, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional vue@"2.x" from @vue/babel-preset-jsx@1.3.0
npm WARN node_modules/@vue/babel-preset-jsx
npm WARN   @vue/babel-preset-jsx@"^1.1.2" from @vue/babel-preset-app@5.0.8
npm WARN   node_modules/@vue/babel-preset-app
npm WARN
npm WARN Conflicting peer dependency: vue@2.7.6
npm WARN node_modules/vue
npm WARN   peerOptional vue@"2.x" from @vue/babel-preset-jsx@1.3.0
npm WARN   node_modules/@vue/babel-preset-jsx
npm WARN     @vue/babel-preset-jsx@"^1.1.2" from @vue/babel-preset-app@5.0.8
npm WARN     node_modules/@vue/babel-preset-app
 
added 17 packages in 8s

3,查看已安装库的版本

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list jspdf
image2pdf@0.1.0 /data/vue/pdf/image2pdf
└── jspdf@2.5.1

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-duo-zhang-tu-pian-zhuan-pdf-jspdf-2-5-1-vue-3-2-37/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码:

<template>
<div>
  <div style="width: 800px;margin: auto;">
    <div style="width:800px;text-shadow: 2px 2px 5px #777;
          line-height: 28px;font-size: 28px;color: rgb(90, 90, 90);
          margin-top: 20px;">
      图片转pdf
    </div>

    <div style="width: 800px;margin-top: 10px;">
      <div style="width:400px;">
        <img v-for="(item,i) in selFiles" :key="i" class="fg" :id="'fg'+item.id" :src="item.fileimg" style="width:400px;" />
      </div>
    </div>

    选择图片读取xmp信息(可多选):
    <input type="file" ref="hiddenfile" accept="image/*" multiple @change="handleFile" class="hiddenInput" />

    <div>
      <button @click="down">下载</button>
    </div>
  </div>
</div>
</template>

<script>
import { jsPDF } from "jspdf";
import {ref} from "vue"
export default {
  name: "pdfComp",
  setup() {
    //pdf内容的宽度
    const pdfWidth = 19;
    //选中的图片文件，保存在数组中
    const selFiles = ref([]);
    //得到pdf内容的高度
    const getPdfHeight = () => {
      let allHeight = 0;
      for( var i=0;i<selFiles.value.length; i++ ){
        let one = selFiles.value[i];
        //得到高度
        let img = document.getElementById("fg"+one.id);
        allHeight = allHeight+img.height;
      }
      let pdfHeight = (allHeight * pdfWidth) / 400;
      return pdfHeight;
    }
    //下载pdf
    const down = () => {
      let pdfHeight = getPdfHeight();
      const recordPdf =  new jsPDF({ unit: 'cm', format: [21, pdfHeight+2],});
      //遍历图片
      let top = 1;
      for( var i=0;i<selFiles.value.length; i++ ){
        let one = selFiles.value[i];
        //得到图片所占内容的高度
        let img = document.getElementById("fg"+one.id);
        let destHeight = (img.height * 19) / img.width;
        //pdf内容添加图片
        recordPdf.addImage(img.src,'jpeg',1,top,pdfWidth,destHeight);
        top = top+destHeight;
      }
      //保存pdf
      recordPdf.save('PDF存档.pdf');
    }
      //选中图片时，把图片添加到数组
      const handleFile = (e) => {
        let filePaths = e.target.files;
        //清空原有缩略图
        if (filePaths.length === 0) {
          //未选择，则返回
          return
        } else {
          //清空数组中原有图片
          selFiles.value.length = 0;
        }
        //把新选中的图片加入数组
        for( var i=0;i<filePaths.length; i++ ){
          let file = filePaths[i];
          let one = {
            id:i,
            fileimg:URL.createObjectURL(file),  //预览用
            file:file,
          }
          selFiles.value.push(one);
        }
      }

      return {
        down,
        handleFile,
        selFiles,
      }
  }
}
</script>

<style scoped>
img {vertical-align:top;}
</style>

三，测试效果

打开pdf:

四，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vue
image2pdf@0.1.0 /data/vue/pdf/image2pdf
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.3.0
│   │ └── vue@3.2.37 deduped invalid: "2.x" from node_modules/@vue/babel-preset-jsx
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped