jszip:压缩包插件的使用

154 阅读1分钟
// 将dom转化为pdf,pdf转化为压缩包(基于vue)
<template>
  <div>
    <div ref="content">
      <h1>PDF内容</h1>
      <p>这里是PDF的内容部分。</p>
    </div>
    <button @click="convertToPDF">下载PDF</button>
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js'; // 用于将HTML内容转换为PDF
import JSZip from 'jszip'; // 用于创建和读取ZIP文件
import { saveAs } from 'file-saver'; // 用于保存文件到本地

export default {
  methods: {
    convertToPDF() {
      const content = this.$refs.content;
      const zip = new JSZip();
      const pdfData = html2pdf().from(content).output('blob'); // 将content转换为PDF格式,并将结果以blob形式存储在pdfData变量中
      zip.file('example.pdf', pdfData); // 将pdfData添加到ZIP文件中,文件名为example.pdf
      zip.generateAsync({ type: 'blob' }).then(zipData => {
        saveAs(zipData, `example.zip`);
      });
    }
  }
};
</script>

image.png