기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. 소개

프런트엔드에서는 시스템의 데이터를 기반으로 PDF 파일을 내보내는 문제가 종종 발생합니다. 이는 일반적으로 백엔드에서 구현되지만 프런트엔드는 왜 할 수 없습니다. 어쩌다 이 요구 사항을 한 번 작성하게 되어서 작은 데모를 작성하게 되었습니다.

샘플 그래프:

2. 구현 단계

1. 먼저 다운로드하세요html2pdf.js이 도서관

   yarn add html2pdf.js
   // 或
   npm i html2pdf.js
   

2. 프로젝트에서 이 기능을 사용해야 할 때마다 이 구성요소를 참조하세요.
3. 사용html2pdf.js

   // 获取一个dom对象,这个dom对象就是pdf中显示的内容
   let element = document.querySelector('.tableBox');
   
   // 设置html2pdf的配置
   let opt = {
     margin: 0, // 设置PDF页面的边距为0，即没有边距
     filename: `成绩表.pdf`, // 指定生成文件的名称
     image: { type: 'jpeg', quality: 1 }, // 设置生成PDF时使用的图像格式为JPEG，质量为1（最高质量）
     // 这是一个用于将HTML元素转换为canvas的库
     html2canvas: {
       scale: 2, //  缩放比例为2，即生成的canvas尺寸是原始尺寸的两倍
       allowTaint: false, // 设置为false，表示不允许加载跨域的图片
       useCORS: true, // 设置为true，允许跨域加载的图片使用CORS策略
     },
     //  控制PDF页面的分页行为
     // mode: 设置为avoid-all，尽量避免分页
     // after: 在生成PDF时，当遇到id为levelAnalysis的元素后进行分页
     pagebreak: { mode: 'avoid-all', after: '#levelAnalysis' },
     enableLinks: true, // 支持文本中放链接，可点击跳转
   };
   
   // 执行pdf的导出
   // html2pdf()将html转换为pdf
   // set(opt)表示转换为pdf时使用指定的配置
   // form表示html2pdf中将指定的dom元素加入pdf
   // save()表示将创建完成的pdf保存到本地
   html2pdf().set(opt).from(element).save();
   

3. 요약

로컬 PDF를 생성하고 다운로드하는 것은 Vue3에서 주로 사용됩니다.html2pdf.js타사 라이브러리는 이 라이브러리를 통해 지정된dom통과하다canvas이 그림만 PDF에 로드하면 지정된 구성 및 지정된 API를 통해 PDF를 로컬로 저장할 수 있도록 그림으로 변환합니다.