如何使用 JsPdf 下载完整的待办事项 (vue.js) 列表？

Posted 2023-03-29

【中文标题】如何使用 JsPdf 下载完整的待办事项 (vue.js) 列表？

【英文标题】：How to download the full to-do (vue.js)list using JsPdf?

【发布时间】：2022-01-21 21:25:54

【问题描述】：

我是这个领域的初学者。尝试使用 vue.js 做一个小项目。 我想为用户提供一个选项来下载他们的 Vue.js 待办事项列表。我已经导入了 jspdf 库和 html2canvas。 This is what I got as an output.but I want my output like this. (this is the output of my code in the local browser.试着在这里找出我的错误。

~我的脚本方法（）在这里。

  download() 
   const doc = new jsPDF();
   const width = doc.internal.pageSize.getWidth();
   const height = doc.internal.pageSize.getHeight();
   /** WITH CSS */
   var canvasElement = document.createElement('canvas');
    html2canvas(this.$refs.content,  canvas: canvasElement 
      ).then(function (canvas)
       
    const img = canvas.toDataURL("image/jpeg", 0.8);
    doc.addImage(img,'JPEG',20,20 , width, height);
    doc.save("sample.pdf");
   );
   ,

这里是我的 Vue 组件代码

<template>
<button @click="download">Download PDF WITH CSS</button>
  <div ref="content">
  <div class="container">
    <h2 class="text-center at-5">My Destinations</h2>
    <!-- input -->
    <div class="d-flex">

      
        <input v-model="task" type="text" placeholder="Enter Destination" class="form-control">
        <button @click="submitTask" class="btn btn-warning rounded-0">SUBMIT</button>

    </div>
  <table class="table table-bordered mt-5" id="tabalo">
  <thead>
    <tr>
      <th scope="col" style="background-color:#33FDFF">Location</th>
      <th scope="col" style="background-color:#33FDFF">Status</th>
      <th scope="col" style="background-color:#33FDFF" class="text-center">#</th>
      <th scope="col" style="background-color:#33FDFF" class="text-center">#</th>
    </tr>
  </thead>
  <tbody style="background-color:#B895DE">
    <tr v-for="(task, index) in tasks" :key="index">
      <td>
        <span :class="'visited': task.status === 'visited'">task.name</span>
      </td>
      <td style = "width:100px">
        <span @click="changeStatus(index)" class="pointer"
        :class="'text-danger' : task.status === 'to-visit',
        'text-warning' : task.status === 'at-the-moment',
        'text-success' : task.status === 'visited'">
         firstCharUpper (task.status)
        </span>
      </td>
      <td>
        <button @click="editTask(index,task)" class="btn btn-warning rounded-0">Edit</button>
      </td>
      <td>
        <button @click="removeTask(index)" class="btn btn-warning rounded-0">Remove</button>

      </td>
    </tr>
  </tbody>
  </table>
  </div> 
  </div>
</template>

【问题讨论】：

这些代码运行良好，但我只得到了 pdf 格式的待办事项列表的一部分。但我想获得一份完整的待办事项清单作为 pdf 格式。请检查上传的图片。任何帮助将不胜感激。

【参考方案1】：

我找到了问题的答案。 它工作正常，I could download the entire to-do list as pdf. 但我不知道 wt 在那个 js 代码上出错了。只需替换此代码并为您想要下载为 pdf 的部分提供一个 id 名称。

download() 

    var dom = document.getElementById('tabalo'); //'tabalo' is an Id in my to-do list table
    html2canvas(dom).then(function(canvas) 
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF();
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save('mydestination.pdf');
    );

【参考方案2】：

下载()

var dom = document.getElementById('tabalo'); //'tabalo' is an Id in my to-do list table
html2canvas(dom).then(function(canvas) 
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img, 'JPEG', 20, 20);
    doc.save('mydestination.pdf');
);
this is working but when we have an image it not display the image 

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。