feature[PDF]: add PDF demo (#1469)

src/views/pdf/download.vue

@@ -0,0 +1,199 @@
+<template>
+  <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
+    <div class="article__heading">
+      <div class="article__heading__title"> {{ article.title }}</div>
+    </div>
+    <div style="color: #ccc;">
+      This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
+    </div>
+    <div ref="content" class="node-article-content" v-html="article.content"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      article: '',
+      fullscreenLoading: true
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+       import('./content.js').then(data => {
+         const { title } = data.default
+         document.title = title
+         this.article = data.default
+         setTimeout(() => {
+           this.fullscreenLoading = false
+           this.$nextTick(() => {
+             window.print()
+           })
+         }, 3000)
+       })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+@mixin clearfix {
+  &:before {
+    display: table;
+    content: '';
+    clear: both;
+  }
+
+  &:after {
+    display: table;
+    content: '';
+    clear: both;
+  }
+}
+
+.main-article {
+  padding: 20px;
+  margin: 0 auto;
+  display: block;
+  width: 740px;
+  background: #fff;
+}
+
+.article__heading {
+  position: relative;
+  padding: 0 0 20px;
+  overflow: hidden;
+}
+
+.article__heading__title {
+  display: block;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-size: 32px;
+  line-height: 48px;
+  font-weight: 600;
+  color: #333;
+  overflow: hidden;
+}
+
+.node-article-content {
+  margin: 20px 0 0;
+  @include clearfix;
+  font-size: 16px;
+  color: #333;
+  letter-spacing: 0.5px;
+  line-height: 28px;
+  margin-bottom: 30px;
+  font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  &> :last-child {
+    margin-bottom: 0;
+  }
+
+  b,
+  strong {
+    font-weight: inherit;
+    font-weight: bolder;
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
+  }
+
+  p {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 21px;
+    line-height: 1.58;
+    letter-spacing: -.003em;
+
+  }
+
+  ul {
+    margin-bottom: 30px;
+  }
+
+  li {
+    --x-height-multiplier: 0.375;
+    --baseline-multiplier: 0.17;
+
+    letter-spacing: .01rem;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 21px;
+    line-height: 1.58;
+    letter-spacing: -.003em;
+    margin-left: 30px;
+    margin-bottom: 14px;
+  }
+
+  a {
+    text-decoration: none;
+    background-repeat: repeat-x;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
+    background-size: 1px 1px;
+    background-position: 0 calc(1em + 1px);
+    padding: 0 6px;
+  }
+
+  code {
+    background: rgba(0, 0, 0, .05);
+    padding: 3px 4px;
+    margin: 0 2px;
+    font-size: 16px;
+    display: inline-block;
+  }
+
+  img {
+    border: 0;
+  }
+
+  /* 解决 IE6-7 图片缩放锯齿问题 */
+  img {
+    -ms-interpolation-mode: bicubic;
+  }
+
+  blockquote {
+    --x-height-multiplier: 0.375;
+    --baseline-multiplier: 0.17;
+    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
+    letter-spacing: .01rem;
+    font-weight: 400;
+    font-style: italic;
+    font-size: 21px;
+    line-height: 1.58;
+    letter-spacing: -.003em;
+    border-left: 3px solid rgba(0, 0, 0, .84);
+    padding-left: 20px;
+    margin-left: -23px;
+    padding-bottom: 2px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  h2,
+  h3,
+  h4 {
+    font-size: 34px;
+    line-height: 1.15;
+    letter-spacing: -.015em;
+    margin: 53px 0 0;
+  }
+
+  h4 {
+    font-size: 26px;
+  }
+}
+</style>