使用jspdf将html内容转换成pdf下载到本地，html导出为pdf

一、？

html转换系列常规？

二、使用步骤

1.使用script标签引入库

将script代码写入index.js文件，body下面，养成好习惯
代码如下（示例）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

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