將元素另存為 pdf 時添加標題

Question

我有這個用於不同元素的函數：

function saveAsPDF(chartID) {
  let canvas = document.querySelector('#' + chartID); //Charts ID
  
  //creates image
  let canvasImg = canvas.toDataURL("image/png", 1.0); 

  //Changing the image file to JPEG will result in the PDF having a black background
            
  //creates PDF from img
  let doc = new jsPDF('landscape'); // page orientation.
  doc.setFontSize(12); //Edit the font size that appears on the PDF.
  doc.text(15, 15, chartID);   // push title right, push title down.
  doc.addImage(canvasImg, 'PNG', 10, 20, 280, 150 ); // push right, push down, stretch horizontal, stretch vertical
  doc.save( chartID +'.pdf');
}

目前 doc.text 將 id 顯示為標題。 但問題是它出現 LikeThis，當我們需要它出現 LikeThis 時，有間距。 由於您不能在 id 中有空格，我還能如何在我的文本中顯示空格。 我不能簡單地做

doc.text(15, 15, 'chart Name')

由於該函數用於不同的事物，關於當我單擊以另存為 PDF 時，文本更改為 以表示正在保存的特定元素的任何想法？

這擊中的每一件事都有一個

<p class="h4 card-header-title">
  Title
</p>

有沒有辦法抓住這個？

Answer 1

繼續使用 ID 但在每個大寫字母前添加一個空格怎么樣，如本答案所述： https : //stackoverflow.com/a/25452019/14201528 ？

doc.text(15, 15, chartID.replace(/([AZ])/g, ' $1').trim());

如果您更喜歡使用段落中的標題，您應該能夠像這樣訪問它：

const cartTitle = document.querySelector("#" + chartId + " > p.card-header-title").innerHTML;

但是<p>元素不應包含任何子元素，否則您將在標題中看到標簽：

 const chartId1 = 'firstdiv'; const chartId2 = 'seconddiv'; console.log(document.querySelector("#" + chartId1 + " > p.card-header-title").innerHTML); console.log(document.querySelector("#" + chartId2 + " > p.card-header-title").innerHTML);

 <div id="firstdiv"> <p class="h4 card-header-title">Title 1</p> </div> <div id="seconddiv"> <p class="h4 card-header-title"><strong>Title 1</strong></p> </div>