vue中将html导出成pdf

woshiyouxiuren

已于 2024-06-20 10:30:30 修改

阅读量1.6k

点赞数 7

文章标签： vue.js pdf 前端

于 2024-06-05 17:21:03 首次发布

本文链接：https://blog.csdn.net/morningttt/article/details/139477583

版权

vue 中将页面 html 内容导出成 pdf 文件格式，使用 html2canvas 、jspdf 。

首先使用 html2canvas 将内容转换为图片，之后写入 pdf 。

参考链接：vue页面导出pdf，预览并下载（pc端） - 简书

1、引用

第一个.将页面html转换成图片

npm install --save html2canvas

第二个.将图片生成pdf

npm install jspdf --save

2、创建 exportToPdf.js ，放入导出方法

// exportToPdf.js

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';



export function exportToPDF(fileName,elementId) {

  // 根据元素ID获取要导出的元素

  const element = document.getElementById(elementId);

  if (!element) {

    console.error('无法找到指定的元素');

    return;

  }



  // 使用 html2canvas 将元素转换为 canvas

  html2canvas(element).then(canvas => {

    // 创建一个新的 jsPDF 实例

    const pdf = new jsPDF('p', 'mm', 'a4');



  // 将 canvas 转换为图片并添加到 PDF

  const imgProps = canvas.toDataURL('image/png');

  const imgPropsArr = imgProps.split(','), mimeType = imgPropsArr[0].match(/:(.*?);/)[1];

  const img = new Image();



  img.onload = function() {

    // 获取图片的宽高

    const pdfWidth = pdf.internal.pageSize.getWidth();

    const pdfHeight = (img.height * pdfWidth) / img.width;



    // 添加图片到 PDF

    pdf.addImage(imgProps, mimeType, 0, 0, pdfWidth, pdfHeight);



    // 保存 PDF

    pdf.save(fileName);



    //预览

    /* // 生成PDF的Blob对象

     const pdfBlob = pdf.output('blob');

     // 创建一个指向Blob对象的URL

     const pdfUrl = URL.createObjectURL(pdfBlob);

     // 打开新窗口预览PDF

     const win = window.open();

     win.document.write(`

   <html>

     <head>

       <title>PDF Preview</title>

     </head>

     <body>

       <embed src="${pdfUrl}" type="application/pdf" width="100%" height="100%">

     </body>

   </html>

 `);*/

    // 你可以选择在预览后释放URL，但这会关闭预览（如果浏览器支持）

    //URL.revokeObjectURL(pdfUrl);

  };



  img.src = imgProps;

}).catch(error => {

    console.error('导出PDF时发生错误:', error);

});

}

3、vue中调用

<template>

  <div style="text-align: center">

    <div>

      <div>

        <button type="button" @click="pdfBtn">导出PDF</button>

      </div>

      <div id="pdfDom" >

        <div>内容</div>

      </div>

    </div>

  </div>

</template>



<script>

  // 导入exportToPDF函数

  import { exportToPDF } from '@/utils/feature/exportToPdf';



    export default {

      name: "exportpdf",

      data(){

        return{

          htmlTitle:'页面导出PDF文件名',

        }

      },

      methods:{

        pdfBtn(){

          exportToPDF(this.htmlTitle,'pdfDom');

        },



      }

    }

</script>



<style scoped>



</style>

-- 更新，上面方法测试发现仅能导出一页的内容，找到了导出多页的方法

原理：获取需要导出内容页面的总高度，根据A4纸张的高度，pdf中循环添加多页，直到全部绘制结束后导出pdf。

缺点：很多地方强制截断了，看起来很别扭，而且页边距也不好控制。

methods: {
	async exportToPDF2() {
          const content = document.getElementById('pdfDom');

          // 获取页面高度和宽度（这里需要调整以适应你的内容）
          const pageHeight = content.scrollHeight || content.clientHeight;
          const pageWidth = content.scrollWidth || content.clientWidth;

          // 创建一个新的 jsPDF 实例
          const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' 代表 portrait（纵向），'mm' 代表毫米，'a4' 代表 A4 纸张大小

          // 定义内容的高度和宽度，以及每页的高度（这里需要调整以适应你的内容）
          const contentLeft = 0; // 内容左边距
          const contentTop = 0; // 内容上边距
          const contentWidth = pageWidth - 2 * contentLeft; // 内容宽度（减去左右边距）

          // 假设的页面尺寸和边距
          const pageSize = {
            width: 595.28, // A4 纸宽度，单位：点（1英寸 = 72点）
            height: 841.89 // A4 纸高度，单位：点
          };
          // 计算当前页面可以容纳的内容高度
          const contentHeight = pageSize.height - contentTop;
          const imgProps = { scale: 1 }; // 用于 html2canvas 的图像属性

          let position = 0; // 初始化内容在 PDF 中的位置
          let y = contentTop; // 初始化 PDF 页面上的 y 坐标

          // 循环直到所有内容都被导出
          while (position < pageHeight) {
            // 计算当前页面的内容高度（可能需要调整以确保内容不会溢出）
            const pageContentHeight = (y + contentHeight > pageHeight) ? pageHeight - y : contentHeight;

            // 使用 html2canvas 捕获当前页面的内容
            const canvas = await html2canvas(content, {
              // 你可以在这里添加更多的 html2canvas 配置选项
              height: pageContentHeight,
              width: contentWidth,
              x: 0,
              y: position,
              scale: 1,
              ...imgProps,
            });

            // 将 canvas 添加到 PDF 页面中
            const imgData = canvas.toDataURL('image/png');
            const imgPropsPDF = pdf.getImageProperties(imgData);
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = (imgPropsPDF.height * pdfWidth) / imgPropsPDF.width;
            pdf.addImage(imgData, 'PNG', pdfWidth, y+pdfHeight, pdfWidth, pdfHeight);

            // 更新 y 坐标以便下一页的内容
            y += pdfHeight + 10; // 10 是页面间的间距，可以根据需要调整
            // 如果内容超出了当前页面，则添加新页面
            if (y > pdfHeight) {
              if(position+contentHeight < pageHeight) {
                pdf.addPage();
              }
              y = contentTop;
              position += contentHeight; // 更新内容在原始 HTML 中的位置
            }
          }

          // 保存 PDF
          pdf.save('exported.pdf');
        }
}