将HTML导出为PDF格式（记录01）

安装需要的插件

npm install html2canvas --save
npm install jspdf --save

html2Canvas配置项

名称	默认值	描述
allowTaint	false	是否允许跨源图像污染画布
backgroundColor	#ffffff	画布背景色（如果在DOM中未指定），为透明设置null
canvas	null	用作绘图基础的现有画布元素
foreignObjectRendering	false	如果浏览器支持ForeignObject渲染，是否使用它
imageTimeout	15000	加载图像超时（毫秒），设置为0可禁用超时
logging	true	为调试目的启用日志记录
proxy	null	用于加载跨源图像的代理的Url。如果留空，则不会加载跨原点图像
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	画布的宽度
height	Element height	画布的高度
x	Element x-offset	裁剪画布x坐标
y	Element y-offset	裁剪画布y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置（例如，如果元素使用位置：fixed）
scrollY	Element scrollY	渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed）
windowWidth	Window.innerWidth	渲染Element时使用的窗口宽度，这可能会影响Media查询等内容
windowHeight	Window.innerHeight	渲染Element时使用的窗口高度，这可能会影响Media查询等内容

详细代码 

在utils文件夹中创建名为htmlToPdf.js的文件

// 导出页面为PDF格式
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
  getPdf() {
    let title = '设备档案'; // 导出的pdf名称
    html2Canvas(document.querySelector('.c-content'), { // 此类名或id必须为全局唯一
      useCORS: true, 
    }).then(function (canvas) {
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      let pageHeight = (contentWidth / 592.28) * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      let imgWidth = 595.28;
      let imgHeight = (592.28 / contentWidth) * contentHeight;
      let pageData = canvas.toDataURL('image/jpeg', 1.0);
      let PDF = new JsPDF('', 'pt', 'a4');
//new JsPDF('l', 'pt', 'a4');三个接收三个参数，第一个控制文件是横向还是竖向，该代码是横向导出pdf
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      PDF.save(title + '.pdf');
    });
  },
};

HTML展示使用

    <template>
        <div class="c-content">
          <div class="c-item">
            <div class="i-title">设备图片</div>
            <el-image :src="ip + equipmentImg" ></el-image>
            <div class="i-title">设备二维码</div>
            <el-image :src="ip + equipmentQrCode" ></el-image>
          </div>
          <div class="c-item">
            <div class="i-title">基本信息</div>
            <ul>
              <li>所属系统：视频系统</li>
              <li>设备型号：v-as001</li>
              <li>设备IP：19*.***.**.**</li>
              <li>设备名称：超清电子眼</li>
              <li>区域位置：亚马逊丛林</li>
              <li>所属部门：战忽局</li>
            </ul>
          </div>
          <div  class="c-item">
            <div class="i-title">维保信息</div>
            <ul>
              <li>维保商：华夏重工</li>
              <li>设备厂商：华夏重工</li>
              <li>联系人：张三</li>
              <li>电话：136*****7821</li>
            </ul>
          </div>
        </div>
        <div class="footer">
            <div  class="common-button" @click="htmlToPdf.getPdf">下载</div>
            <div class="common-button" @click="closeDialog">确定</div>
        </div>
    </template>

<script setup>
import htmlToPdf from '@/utils/htmlToPdf';

</script>