【vue3.0】实现导出的PDF文件内容是红头文件格式

news2024/9/29 7:26:29

效果图:

在这里插入图片描述

编写文件里面的主要内容

  <main>
        <div id="report-box">
          <p>线索描述</p>
          <p class="label">
            <span>线索发现时间:</span> <span>{{ detailInfoVal?.problem.createdDate }}</span>
          </p>
          <p class="label">
            <span>派发时间:</span> <span>{{ detailInfoVal?.taskCreateTime }}</span>
          </p>

          <p class="label">
            <span>所属责任区:</span> <span>{{ detailInfoVal?.problem.regionalName }}</span>
          </p>

          <p>处置描述</p>
          <ElInput
            v-model="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            maxlength="200"
            type="textarea"
            placeholder="请填写"
            show-word-limit
          />
          <div style="margin-top: 10px">
            <p>整改图片对比</p>
            <span>【整改前 {{ detailInfoVal?.taskCreateTime }}】</span>
            <br />
            <ElImage
              v-for="(item, index) in srcList"
              :key="item"
              class="img"
              :infinite="false"
              :src="item"
              :zoom-rate="1.2"
              :initial-index="initialIndexImage"
              :preview-src-list="srcList"
              fit="cover"
              hide-on-click-modal
              @show="onPreviewImg(index)"
            />
            <br />
            <span>【整改后 {{ detailInfoVal?.taskUpdateTime }}】</span>
            <div v-if="srcList2.length" class="img_box">
              <div v-for="(item, index) in srcList1" :key="index">
                <img
                  v-if="['png', 'jpg', 'jpeg'].includes(item.type)"
                  :src="item.url"
                  style="width: 120px; height: 120px; border-radius: 5px; margin-right: 5px"
                />
              </div>
            </div>
            <br />
            <span v-if="!srcList2.length">暂无图片信息</span>
          </div>
        </div>
      </main>

在导出事件里面处理文件的红色标题以及红丝横线，小圆点功能

在这里插入图片描述

使用的工具:【jspdf】【html2canvas】

npm install jspdf
npm install html2canvas

引入

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import dayjs from 'dayjs';//文件里内容我用到了时间

核心代码

html2canvas(document.querySelector('#report-box'), { backgroundColor: '#fff', useCORS: true }).then((canvas) => {
    const pageData = canvas.toDataURL('image/png');
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;

    var imgWidth = 530;
    var imgHeight = (595.28 / contentWidth) * contentHeight;

    var pdf = new jsPDF('', 'pt', 'a4'); // 纵向排列

    window.pdfAddFont(pdf);
    pdf.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
    pdf.setFont('SourceHanSans-Normal');

    const fontColor = 'red'; //文字的颜色，哪里需要设置 就在需要添加文字之前去执行

    // 添加双横线的函数
    function addDoubleLine(y) {
      pdf.setLineWidth(5);
      pdf.setDrawColor(255, 0, 0);
      // 绘制第一条横线
      pdf.line(40, y, 570, y);

      pdf.setLineWidth(2);
      // 绘制第二条横线，y + 10 表示下方有10单位的间隔
      pdf.line(40, y + 5, 570, y + 5);
    }

    // 添加圆点
    function addDoubleDot(x, y) {
      // 设置圆的样式（红色填充）
      pdf.setFillColor('red');

      // 开始一个新的路径
      const radius = 1;

      pdf.ellipse(x, y, radius, radius);
    }

    pdf.setFontSize(20); // 设置字体大小
    pdf.setTextColor(fontColor); // 设置字体颜色
    pdf.text('有害生物异常任务报告', 620 / 2, 40, {  //第二个参数 和第三个参数（左、上）
      align: 'center',
    });

    pdf.setFontSize(12); // 设置字体大小
    pdf.setTextColor(0, 0, 0);
    pdf.text('有害生物防治检疫站', 40, 75, {
      align: 'left',
    });

    pdf.text(`${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, 570, 75, {
      align: 'right',
    });

    pdf.setTextColor(227, 60, 47);

    // 调用函数添加双横线
    addDoubleLine(80);

    pdf.addImage(pageData, 'JPEG', 40, 110, imgWidth, imgHeight);

    pdf.setFontSize(12); // 设置字体大小
    pdf.setTextColor(113, 115, 118);
    pdf.text(`编辑${userRoleInfo.value.userName}`, 40, imgHeight + 160, {
      align: 'left',
    });
    
	// 调用函数添加双横线
    addDoubleLine(imgHeight + 140);
    
	// 调用函数添加小圆点
    addDoubleDot(620 / 2, imgHeight + 155);

    pdf.save(`有害生物异常任务报告-${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
  });