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

Question

我是这个领域的初学者。尝试使用 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>

Answer 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');
    });

Answer 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

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

How to download the full to-do (vue.js)list using JsPdf?

javascript

vue.js

jspdf

html2canvas