jspdf 根据dom生成pdf 自动下载完成后打开预览

要实现根据DOM生成PDF并自动下载完成后打开预览，你可以使用以下步骤：

引入jspdf库和html2canvas库。确保在HTML文件中正确引入这两个库的CDN链接或本地文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

创建一个JavaScript函数，用于生成PDF并自动下载。在该函数中，你可以使用html2canvas库将DOM元素转换为canvas，并使用jspdf库将canvas转换为PDF。

function generatePDF() {
  // 获取要转换为PDF的DOM元素
  const element = document.getElementById('pdf-element');

  // 使用html2canvas将DOM元素转换为canvas
  html2canvas(element).then((canvas) => {
    // 创建一个空PDF对象
    const pdf = new jsPDF();

    // 计算canvas的宽度和高度
    const width = canvas.width;
    const height = canvas.height;

    // 将canvas转换为图像，并将其添加到PDF中
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, width, height);

    // 使用下载链接将PDF保存到本地
    pdf.save('pdf-document.pdf');

    // 使用window.open打开PDF预览
    window.open(pdf.output('bloburl'), '_blank');
  });
}

在HTML中添加一个按钮，用于触发生成PDF的函数。

<button onclick="generatePDF()">生成PDF</button>

在HTML中添加要转换为PDF的DOM元素。给该元素一个唯一的ID，以便在JavaScript函数中引用它。

<div id="pdf-element">
  <!-- 添加要转换为PDF的DOM内容 -->
</div>

现在，当你点击"生成PDF"按钮时，将会根据DOM生成PDF文件并自动下载完成后打开预览