当前位置: 首页 > article >正文

纯前端如何实现批量下载功能呢?

纯前端如何实现批量下载功能呢?
***需求:***在不依赖后端的情况下,前端需要独立实现批量下载,且下载的文件需统一放在一个文件夹中并压缩
插件:
html2canvas可以实现截图功能
JsPDF 可以将文件生成pdf
JSZip 可以压缩文件
FileSaver 保存文件到本地

代码如下:

<template>
  <div>
    <van-button @click="zipPdf">批量下载</van-button>
    <div
      v-for="(item, index) in pdfList"
      :key="index"
      id="downPdf"
      style="margin-bottom: 50px"
    >
      标题{{ index }}
      <div v-for="keys in 50" :key="keys">内容{{ keys }}</div>
    </div>
  </div>
</template>
<script>
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
import JSZip from 'jszip';
import FileSaver from 'file-saver';
export default {
  name: 'zipPDF',
  data() {
    return {
      isShow: false,
      planName: '测试',
      pdfList: [
        {
          taskId: '001',
          taskName: '测试一',
          num: '1',
        },
        {
          taskId: '002',
          taskName: '测试二',
          num: '2',
        },
      ],
    };
  },
  methods: {
    htmlToPDF() {
      this.zipPdf();
    },
    //下载
    async zipPdf() {
      let allRefList = [];
      for (let index = 0; index < this.pdfList.length; index++) {
        let downPdfListRef = document.getElementById('downPdf');
        let title =
          this.pdfList[index].taskId + '-' + this.pdfList[index].taskName;
        const p = await this.getPdf(downPdfListRef, title);
        allRefList.push(p);
        console.log('现在生成第' + (index + 1) + '份pdf页面了');
        if (index === this.pdfList.length - 1) {
          this.zipChange(allRefList);
        }
      }
    },
    //转pdf
    getPdf(el, pdfName) {
      return new Promise((resolve) => {
        html2Canvas(el, {
          allowTaint: true,
          scale: 1, //处理模糊问题
          useCORS: true, //开启跨域,这个是必须的
        }).then(function (canvas) {
          //需要异步处理
          setTimeout(() => {
            let pdf = new JsPDF('p', 'mm', 'a4'), //A4纸,纵向
              ctx = canvas.getContext('2d'),
              a4w = 190,
              a4h = 247,
              imgHeight = Math.floor((a4h * canvas.width) / a4w),
              renderedHeight = 0;
            while (renderedHeight < canvas.height) {
              let page = document.createElement('canvas');
              page.width = canvas.width;
              page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
              //用getImageData剪裁指定区域,并画到前面创建的canvas对象中
              page
                .getContext('2d')
                .putImageData(
                  ctx.getImageData(
                    0,
                    renderedHeight,
                    canvas.width,
                    Math.max(imgHeight, canvas.height - renderedHeight)
                  ),
                  0,
                  0
                );
              pdf.addImage(
                page.toDataURL('image/jpeg', 1.0),
                'JPEG',
                10,
                30,
                a4w,
                Math.min(a4h, (a4w * page.height) / page.width)
              );
              renderedHeight += imgHeight;
              if (renderedHeight < canvas.height) {
                pdf.addPage(); //如果后面还有内容,添加一个空页
              }
            }
            resolve({ PDF: pdf, name: pdfName });
            // PDF.save(pdfName + '.pdf')
          });
        });
      }, 500);
    },
    //压缩
    zipChange(data) {
      const zip = new JSZip();
      data.forEach(async (item) => {
        const { PDF, name } = item;
        if (data.length === 1) {
          PDF.save(`${name}.pdf`);
        } else {
          await zip.file(`${name}.pdf`, PDF.output('blob'));
        }
        if (data.length > 1) {
          zip.generateAsync({ type: 'blob' }).then((content) => {
            FileSaver.saveAs(content, this.planName + '.zip');
          });
        }
      });
    },
  },
};
</script>

http://www.kler.cn/a/354985.html

相关文章:

  • 【微信小程序】2|轮播图 | 我的咖啡店-综合实训
  • 链表的详解
  • Java爬虫:速卖通(AliExpress)商品评论获取指南
  • 探索AI代理在《我的世界》中的奇妙之旅:代理IP的角色与影响
  • Mybatis分页插件的使用问题记录
  • Qt笔记:网络编程UDP
  • ChatGPT免费使用:人工智能在现代社会中的作用
  • Day31 || 122.买卖股票的最佳时机 II、55. 跳跃游戏、 45.跳跃游戏II 、1005.K次取反后最大化的数组和
  • LangGraph - Hierarchical Agent Teams
  • 京东背调有病吧......
  • 开源节流-2024年10月17日
  • 【秋招笔试】10.13拼多多(已改编)秋招-三语言题解
  • LLM大模型的评测维度有哪些?
  • 试用cursor的简单的记录
  • mysql迁移到达梦的修改点
  • 企业电子印章主要通过以下几种方式进行防伪
  • DIFY上使用多种大语言模型(MindCraft API)
  • AI绘图大模型 Stable Diffusion 使用详解
  • 利用高德API获取整个城市的公交路线并可视化(六)
  • k8s worker 节点关机 sts 管理的 pod 无法迁移
  • 如何设计开发RTSP直播播放器?
  • 基于直播美颜SDK的实时美颜平台开发指南
  • 如何启动hive
  • 软件分享|Notepad-- 文本编辑器
  • 基于逻辑回归实现乳腺癌预测
  • Rocky linux 修改ip地址, rocky服务器修改静态地址, rocky虚拟机修改ip