vue使用html2pdf导出pdf

Question

我现在vue页面生成pdf，遇到了几个问题，首先是我页面设定的左右边距各是10mm，打印出的pdf只有左边的20mm，页面显示的换行了但是打印出来没有换行，有些文字被截掉了，还有想要隐藏输入框。是因为使用的HTML2pdf，不会适配vue吗？

  exportToPdf() {
      console.log("123");
      // 获取要导出的页面内容的HTML元素
      const content = document.getElementById("pdfcontent");
      console.log(content);
      // 定义PDF选项，设置页面大小为A4
      const options = {
        filename: "exported.pdf",
        pagebreak: { mode: "css", before: ".page-break" }, // 页面分页
        // jsPDF: {
        //   format: "a4",
        //   margin: { top: 60, right: 60, bottom: 60, left: 60 },
        // },
      };
      console.log(options);
      // 使用html2pdf.js生成PDF
      // html2pdf().set(options).from(content).save();},
      html2pdf()
        .set(options)
        .from(content)
        .output("blob")
        .then(function (pdfBlob) {
          // 创建FormData对象
          const formData = new FormData();
          console.log(pdfBlob);
          // 将PDF Blob添加到FormData
          formData.append("file", pdfBlob, "expored.pdf");
          console.log(formData);
          // 发送FormData到后端
          fetch("http://127.0.0.1:5007/pdf", {
            method: "POST",
            body: formData,
          })
            .then((response) => {
              console.log(response.data);
            })
            .catch((error) => {
              console.error(error);
            });
        });
    },
.pdfcontent {
  width: 21cm;
  height: 29.7cm;
  margin: 10mm 10mm 10mm 10mm;
    /* border: 1px solid black; 添加整体边框 */

  padding: 10mm; /* 添加卡片内边距 */
  box-sizing: border-box; /* 盒子模型计算包含边框和内边距 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); /* 添加卡片阴影效果 */
}

Answer 1

学会了再弄一个div和输入框双向绑定，然后就打印的时候div出现输入框消失，解决了外边框的问题和内容不换行的问题