使用jspdf将html内容轉換成pdf下載下傳到本地，html導出為pdf

• 一、？
• 二、使用步驟
• • 1.使用script标簽引入庫
  • 2.使用jspdf
  • 3.完成
• dev_services!!!!!
• 總結

一、？

html轉換系列正常？

二、使用步驟

1.使用script标簽引入庫

将script代碼寫入index.js檔案，body下面，養成好習慣

代碼如下（示例）：

2.使用jspdf

html

代碼如下（示例）：

<div id="htmlToPdf">
    <div id="centerBody">
      <div>
        <div id="content">
          <h1>The title goes here</h1>
          <p>The pararaph goes here</p>
        </div>
        <div id="page"></div>
        <button id="submit" @click="exportPdf" class="custom-btn btn-1">導出</button>
      </div>
    </div>
  </div>
           

js

name: "htmlToPdf",
  data() {
    return {};
  },
  methods: {
    exportPdf() {
      var doc = new jsPDF();
      var specialElementHandlers = {
        "#editor": function (element, renderer) {
          return true;
        },
      };
      doc.fromHTML(document.getElementById("content").innerHTML, 15, 15, {
        width: 190,
        elementHandlers: specialElementHandlers,
      });
      doc.save("sample-page.pdf");
    },
  },
           

css福利

.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  }

  /* 1 */
  .btn-1 {
    background: rgb(6, 14, 131);
    background: linear-gradient(
      0deg,
      rgba(6, 14, 131, 1) 0%,
      rgba(12, 25, 180, 1) 100%
    );
    border: none;
  }
  .btn-1:hover {
    background: rgb(0, 3, 255);
    background: linear-gradient(
      0deg,
      rgba(0, 3, 255, 1) 0%,
      rgba(2, 126, 251, 1) 100%
    );
  }
           

3.完成

連結: https://github.com/NotBerlin/vue-router-vuex/tree/dev_services.

dev_services!!!

總結

good afternoon