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

2022-07-17 23:07:59 阅读：261 来源： 互联网

标签：jspdf npm vue babel 37 WARN preset pdf

一，安装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://www.cnblogs.com/architectforest

对应的源码可以访问这里获取： 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

标签：jspdf,npm,vue,babel,37,WARN,preset,pdf
来源： https://www.cnblogs.com/architectforest/p/16488814.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

一，安装jspdf库:

二，js代码:

三，测试效果

四，查看vue框架的版本: