在数字化办公时代，PDF以其跨平台、易于打印和分享等优点，成为了文档格式的首选。而今天，我们要学习一项超实用的前端黑科技，无需任何插件，就能将网页内容转化为PDF并下载，轻松提升工作效率！

告别繁琐，三步实现PDF导出

引入JS库：使用 jsPDF 和 html2canvas 这两个强大的JavaScript库，为PDF生成提供支持。

   npm install jspdf html2canvas

HTML代码：创建一个按钮，用于触发PDF生成和下载功能。

   <button @click="exportPDF">导出PDF</button>
   <div id="contentToConvert">
    <!-- 需要转换为 PDF 的内容 -->
   </div>

JavaScript代码：编写 exportPDF 函数，利用 html2canvas 将HTML元素转换为 canvas，再使用 jsPDF 将 canvas 转换为 PDF 并下载。

   import jsPDF from 'jspdf';
   import html2canvas from 'html2canvas';

   export default {
     methods: {
       async exportPDF() {
         const element = document.getElementById('contentToConvert');
         const canvas = await html2canvas(element);
         const imgData = canvas.toDataURL('image/png');

         const pdf = new jsPDF({
           orientation: 'p', // 纵向
           unit: 'mm', // 单位
           format: 'a4' // 纸张大小
         });

         const imgWidth = 210; // A4纸宽度，单位mm
         const pageHeight = 297; // A4纸高度，单位mm
         let imgHeight = (canvas.height * imgWidth) / canvas.width;
         let position = 0;
         let pageData = '';

         // 处理多页情况
         if (imgHeight < pageHeight) {
           pageData = imgData;
         } else {
           while (imgHeight > 0) {
             pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight > pageHeight ? pageHeight : imgHeight);
             imgHeight -= pageHeight;
             position -= pageHeight;
             if (imgHeight > 0) {
               pdf.addPage();
             }
           }
         }
         // 添加图片到PDF
         pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);
         // 保存PDF
         pdf.save('download.pdf');
       }
     }
   };

代码解析：

引入 jsPDF 和 html2canvas：

   import jsPDF from 'jspdf';
   import html2canvas from 'html2canvas';

这两行代码引入了 jsPDF 和 html2canvas 库，用于生成PDF和将HTML元素转换为 canvas。

获取目标元素：

   const element = document.getElementById('contentToConvert');

这行代码获取了ID为 contentToConvert 的HTML元素，也就是我们需要转换为PDF的内容。

将HTML元素转换为Canvas：

   const canvas = await html2canvas(element);

这行代码使用 html2canvas 将目标元素转换为 canvas 对象。

创建PDF对象：

   const pdf = new jsPDF({
       orientation: 'p', // 纵向
       unit: 'mm', // 单位
       format: 'a4' // 纸张大小
     });

这行代码创建了一个新的 jsPDF 对象，并设置了PDF的页面方向、单位和纸张大小。

计算图片尺寸和位置：

   const imgWidth = 210; // A4纸宽度，单位mm
   const pageHeight = 297; // A4纸高度，单位mm
   let imgHeight = (canvas.height * imgWidth) / canvas.width;
   let position = 0;
   let pageData = '';

这几行代码计算了要添加到PDF中的图片的宽度、高度和位置。

添加图片到PDF：

   pdf.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight>pageHeight?pageHeight:imgHeight);

这行代码将图片添加到PDF文档中。

保存PDF文件：

   pdf.save('download.pdf');

这行代码将生成的PDF文件保存到本地，文件名为 download.pdf。

总结

通过以上步骤，我们就能轻松地将网页内容转换为PDF并下载。这项技术不仅可以用于生成各种报表和文档，还可以用于制作电子书、电子票据等，应用场景非常广泛，快来试试吧！

里克资源网

前端黑科技:一键将网页变 PDF，so easy!

告别繁琐，三步实现PDF导出

代码解析：

总结