vue.js HTML2pdf页眉和页脚的设置和选项

ojsjcaue 于 2023-06-30 发布在 Vue.js

关注(0)|答案(1)|浏览(658)

我在我的应用程序中使用Vue JS。我有一个表格内容打印和我使用HTML 2 pdf。我可以添加页眉和页脚，分页等。问题是-表内容是动态的，表的长度以及列数取决于用户的过滤器。它打破了自动，所以我不能在我的html手动分割表。目标是为每个页面添加表格标题。我可以使用DOM动态地获取表头（cols和names的数量取决于用户的选择），并将其添加到我的表头中。但它显示起来就像一根弦。标题中的每个列名称与列内容不匹配。我的表cols有固定的相等大小，所以我想，如果我能把这个头字符串拉伸到最大宽度，视觉上它会匹配。
问题：如何将标题字符串拉伸到PDF页面的全宽？可以很好的样式和添加边框。或者有更有效的方法来获取每页的表头？ps. Table style本身是用grid cols自定义样式的，而不是用th/td自定义的table class。
下面是我的代码：

const tableHeader = computed(() => {
 let headerCollection = document.getElementById('header-pdf')
  ?.children as HTMLCollection
 let arr = []
 for (let i = 0; i < headerCollection.length; i++) {
 arr.push(headerCollection[i].innerHTML)
}
var headerString = arr.toString().replace(/\,/g, ' | ').toUpperCase()

return headerString
})

export const exportToPDF = (elementId: string, orientation: string) => {
var element = document.getElementById(elementId)
var opt = {
filename: fileName.value,
margin: [15, 2, 15, 6],
pagebreak: { mode: 'css' },
jsPDF: { format: 'a4', orientation: orientation, putTotalPages: true }
}
html2pdf().set(opt).from(element).toPdf().get('pdf')

.then((pdf: any) => {
var totalPages = pdf.internal.getNumberOfPages();
var pageHeight = pdf.internal.pageSize.height || pdf.internal.pageSize.getHeight();
var pageWidth = pdf.internal.pageSize.width || pdf.internal.pageSize.getWidth();
var footerText = '';
var i;
for (i = 1; i <= totalPages; i++) {
    if (i > 1) {
        pdf.setPage(i);
        pdf.setFontSize(8);
        pdf.setTextColor(150);
       
       pdf.text('page ' + i + ' of ' + totalPages + '\n' + footerText , pageWidth / 2, 
        pageHeight - 5, {align: 'center'});
       pdf.setFontSize(12);
       pdf.text(tableHeader .value , pageWidth / 2, 10, {align: 'center'});

    }
  }}).save()

vue.js

来源：https://stackoverflow.com/questions/76555250/html2pdf-settings-and-options-for-header-and-footer

1条答案

按热度按时间

lokaqttq1#

主要问题是标题字符串作为一个整体居中，而不是每个列标题都在其相关列的中心，因为它被视为单个实体。
这个问题的一个解决方案是根据列的数量和宽度来确定每个标题应该放在哪里。然后，这些位置可以用于将每个标题直接放置在其相应的列上。
以下是代码的修订版本，其中头部被正确地划分为其组成部分：

const tableHeader = computed(() => {
  let headerCollection = document.getElementById('header-pdf')?.children as HTMLCollection;
  let arr = [];
  for (let i = 0; i < headerCollection.length; i++) {
    arr.push(headerCollection[i].innerHTML);
  }
  return arr.map(e => e.toUpperCase());
})

export const exportToPDF = (elementId: string, orientation: string) => {
  var element = document.getElementById(elementId);
  var opt = {
    filename: fileName.value,
    margin: [15, 2, 15, 6],
    pagebreak: { mode: 'css' },
    jsPDF: { format: 'a4', orientation: orientation, putTotalPages: true }
  }
  
  html2pdf().set(opt).from(element).toPdf().get('pdf').then((pdf: any) => {
    var totalPages = pdf.internal.getNumberOfPages();
    var pageHeight = pdf.internal.pageSize.height || pdf.internal.pageSize.getHeight();
    var pageWidth = pdf.internal.pageSize.width || pdf.internal.pageSize.getWidth();
    var footerText = '';
    var i;

    var colWidth = pageWidth / tableHeader.value.length; // Divide total width by number of headers
    var headers = tableHeader.value;

    for (i = 1; i <= totalPages; i++) {
      if (i > 1) {
        pdf.setPage(i);
        pdf.setFontSize(8);
        pdf.setTextColor(150);
        pdf.text('page ' + i + ' of ' + totalPages + '\n' + footerText , pageWidth / 2, pageHeight - 5, {align: 'center'});
        pdf.setFontSize(12);

        headers.forEach((text, index) => {
          var position = (colWidth / 2) + (colWidth * index);
          pdf.text(text, position, 10, {align: 'center'});
        })
      }
    }
  }).save();
}

在这里，主要的区别是我们将头文件保存为一个数组，并使用forEach函数单独定位每个头文件，而不是将它们转换为字符串。这段代码理所当然地认为，每一列的宽度在其标题中均匀分布。之后，标题位于其相应列的中间。
应用样式和边框有点挑战性，因为html2pdf使用jsPDF包，该包通常用于文本放置，而不是复杂的设计。使用line函数，您可能会构造线条作为边框，但添加背景颜色或其他复杂样式可能不可行。
请在您的环境中测试此代码以确保其正常工作。

赞(0）回复(0）举报 2023-06-30

我来回答

vue.js HTML2pdf页眉和页脚的设置和选项

1条答案

相关问题

热门标签

最新问答