【別貪心】resume

最近我沒有珍惜時間，好好學技術，不應該，不應該。
吼吼吼，和大家一起來看github項目啊
首先放一下作者大大的github地址：https://github.com/FangMingHong/resume
其實這個項目沒有什麼難點的，不過我覺得作者大大的想法很有意思。
我們寫簡歷的時候，都是用word來寫簡歷，哈哈，我覺得word並不是特別好用。
看了作者大大的這個，覺得很有意思，內容很簡單，大家可以自己發揮，然後自己可以打印pdf版本。就很好玩。
先看下效果

然後還有一個下載爲pdf的功能
這個界面我們分析代碼就可以知道，大小是可以自己調節的。
分析package.json文件可以看到有安裝jspdf包，用來打印pdf文檔
接下來我們來看代碼

//main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

main.js中引用了App.vue
App.vue中引用了info.json，數據都是從info.json中獲取的，裏面還有一個直接打印簡歷的功能

<template>
  <div id="app">
    <div class="main" id="main">
      <div class="header">
        <img src="./assets/touxiang.jpg" alt="無法顯示頭像" />
        <div class="header-info">
          <h1>{{ info.name }}</h1>
          <h3>{{ info.post }}</h3>
          <p>{{ info.motto }}</p>
        </div>
      </div>
      <div class="content">
        <section v-for="(item, index) in info.content" :key="index">
          <span>{{ item.title }}</span>
          <div
            class="item"
            v-for="(itemitem, indexindex) in item.items"
            :key="indexindex + 2019"
          >
            <h5 class="item-time">{{ itemitem.time }}</h5>
            <h5 class="item-name">{{ itemitem.name }}</h5>
            <h5 class="item-position">{{ itemitem.position }}</h5>
            <p class="item-description">{{ itemitem.description }}</p>
            <ul class="item-list">
              <li
                v-for="(list, listindex) in itemitem.list"
                :key="listindex + 1000"
              >
                <i></i>
                {{ list }}
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
    <div class="footer">
      <button @click="download">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-PROFILE"></use>
        </svg>
        PDF簡歷
      </button>
      <p class="latest-update-time">最後更新：{{ info.latesttime }}</p>
      <p class="github">
        <a href="https://github.com/FangMingHong/resume" target="_blank">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
      </p>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import './css/iconfont.js'; // 阿里巴巴矢量圖
import info from '../info.json';
import { constants } from 'fs';
import html2canvas from 'html2canvas';
import jspdf from 'jspdf';
export default {
  name: "app",
  data() {
    return {
      info:{}
    }
  },
  methods:{
    download() {
      var element = document.querySelector('#main');
      var w = element.clientWidth;    
      var h = element.clientHeight;    
      var canvas = document.createElement("canvas");
      var scale = 2
      canvas.width = w * scale;    
      canvas.height = h * scale;
      canvas.getContext("2d").scale(scale, scale);
      var opts = {
        scale: scale,
        canvas: canvas,
        width: w,
        height: h,
        useCORS: true
      }
      let that = this;   
      html2canvas(element,opts).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jspdf('', 'pt', 'a4');
        if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {    
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                if(leftHeight > 0) {
                  pdf.addPage();
                }
            }
        }
        pdf.save(that.info.name+'的簡歷.pdf');       
      })
    }
  },
  created() {
    this.info = info
  }
};
</script>

<style lang="less">
@import url('./css/reset.css');
@color:#2d8cf0; // 主色
@background-color:#f8f8f9; // 背景顏色
@text-color:#657180; // 正文顏色
@content-title-color:#254665; // 內容標題顏色
@font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif; // 正文字體
@font-family-title: 'Lucida Grande', 'Hiragino Sans GB', 'Hiragino Sans GB W3', @font-family; // 標題字體
body,html {
  background-color: @background-color;
  color:@text-color;
}
#app {
  font-family: @font-family;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  color:@text-color;
  .main {
    box-shadow: 0 0 15px silver;
    -webkit-box-shadow: 0 0 15px silver;
    margin: 0 auto;
    background-color: #fff;
    .header {
      background-color: @color;
      width: 100%;
      padding: 20px;
      color:#fff;
      overflow: hidden;
      h1 {
        font-size: 50px;
        margin-bottom: 10px;
      }
      h3 {
        font-size: 30px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
      }
      img {
        display: none;
      }
    }
    .content {
      padding: 20px;
      section {
        width: 100%;
        margin-bottom: 10px;
        span {
          color:@content-title-color;
          border: 2px solid @content-title-color;
          padding: 4px;
          display: inline-block;
        }
        .item-time {
          margin: 6px 0;
          font-weight: bold;
        }
        .item-name {
          font-weight: bold;
        }
        .item-position {
          font-weight: 600;
          clear:both;
          margin: 6px 0;
        }
        .item-description {
          word-wrap:break-word;
          word-break:break-all;
          text-align: justify;
        }
        .item-list {
          width: 100%;
          // background-color: skyblue;
          li {
            line-height: 20px;
            i {
              display: inline-block;
              width: 4px;
              height: 4px;
              position: relative;
              top: -3px;
              background-color: @color;
              // border-radius: 50%;
              margin-right: 10px;
            }
          }
        } 
      }
    }
    @media screen and (min-width: 1200px) {
        width:76%;
        min-height: 600px;
        font-size: 20px;
        margin-top: 40px;
        .header {
          height: 200px;
          img {
            display: block;
            float: left;
            height: 100%;
          }
          .header-info {
            float: left;
            margin-left: 30px;
          }
        }
        .content {
          section {
            // min-height: 160px;
            .item {
              width: 100%;
              overflow: hidden;
              margin-bottom: 10px;
              font-size: 16px;
              .item-time {
                float: left;
              }
              .item-name {
                float: right;
              }
            }
          }
        }
    }
    @media screen and (min-width: 800px) and (max-width: 1199px) {
        width:76%;
        min-height: 600px;
        font-size: 20px;
        margin-top: 40px;
        .header {
          height: 200px;
          img {
            display: block;
            float: left;
            height: 100%;
          }
          .header-info {
            float: left;
            margin-left: 30px;
          }
        }
        .content {
          section {
            // min-height: 160px;
            .item {
              width: 100%;
              overflow: hidden;
              margin-bottom: 10px;
              font-size: 16px;
              .item-time {
                float: left;
              }
              .item-name {
                float: right;
              }
            }
          }
        }
    }
    @media screen and (min-width: 480px) and (max-width: 799px) {
        width:90%;
        min-height: 600px;
        font-size: 2rem;
        .header {
          margin-top: 20px;
          height: 200px;
          .header-info {
            text-align: center;
            h3 {
              margin: 2rem;
            }
          }
        }
        .content {
          section {
            // min-height: 160px;
            .item {
              width: 100%;
              overflow: hidden;
              margin-bottom: 10px;
              font-size: 16px;
              .item-time {
                float: left;
              }
              .item-name {
                float: right;
              }
            }
          }
        }
    }
    @media screen and (max-width: 479px) {
        width:100%;
        min-height: 600px;
        font-size: 20px;
        .header {
          height: 200px;
          .header-info {
            text-align: center;
            h1 {
              letter-spacing: 10px;
            }
            h3 {
              font-size: 20px;
              margin: 20px;
            }
          }
        }
        .content {
          font-size: 16px;
        }
    }
  }
  .footer {
    margin-top: 20px;
    text-align: center;
    font-size: 1.4rem;
    color:#808695;
    p {
      margin-bottom: .4rem;
    }
    a {
      text-decoration: none;
      color:#808695;
      font-size: 1.8rem;
    }
    button {
      padding: 8px 20px;
      color: @text-color;
      background-color: @background-color;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      outline: none;
      &:hover {
        color:@color;
      }
      svg {
        font-size: 2rem;
      }
    }
  }
}
</style>