markdown工具增加导入导出

apps/html2markdown/index.html

@@ -16,6 +16,7 @@
                 <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
                     <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：{{toolName[codeType]}}
                 <span class="x-xdemo" ref="demoLink1" @click="setDemo">示例：{{codeType}}片段</span>
+                <span class="x-xdemo" ref="importLink" @click="importContent">导入{{codeType}}文件</span>
 
                 <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{toolName[nextCodeType]}}&gt;&gt;</span>
             </h3>
@@ -29,7 +30,9 @@
         </div>
 
         <div id="rst" class="row ui-mt-10" v-show="resultContent.length > 0">
-            <a href="#" @click="preview" v-html="previewText"></a><hr>
+            <a href="#" class="x-xdemo" style="margin-left: 0" @click="preview" v-html="previewText"></a>
+            <a href="#" class="x-xdemo" @click="exportContent" title="在打印设置中，务必选择「PDF」">导出为PDF</a>
+            <hr>
             <textarea class="mod-textarea" id="rstCode" ref="rstCode" v-model="resultContent" @click="getResult" v-show="!showPreview"></textarea>
             <div class="x-preview" v-show="showPreview" v-html="previewHTML"></div>
         </div>

apps/html2markdown/index.js

@@ -78,6 +78,223 @@ new Vue({
                     '- Ajax调试:**关**';
             }
             this.convert();
+        },
+
+        // 导入内容
+        importContent: function () {
+            let that = this;
+            let fileInput = document.getElementById('fileInput');
+            if (!fileInput) {
+                fileInput = document.createElement('input');
+                fileInput.id = 'fileInput';
+                fileInput.type = 'file';
+                fileInput.accept = {HTML: 'text/html', Markdown: 'text/x-markdown'}[that.codeType];
+                fileInput.style.cssText = 'position:relative;top:-1000px;left:-1000px;';
+                fileInput.onchange = function (event) {
+                    let reader = new FileReader();
+                    reader.readAsText(fileInput.files[0], 'utf-8');
+                    reader.onload = (evt) => {
+                        that.sourceContent = evt.target.result;
+                        that.convert();
+                        document.body.removeChild(fileInput);
+                    };
+                };
+                document.body.appendChild(fileInput);
+            }
+            fileInput.click();
+        },
+
+        // 通过调用系统打印的形式，打印为pdf
+        exportContent: function () {
+            let css = `@page {
+   size: 5.5in 8.5in;  
+   margin: 70pt 60pt 70pt;
+}
+
+@page:first {
+   size: 5.5in 8.5in;  
+   margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+div.frontcover { 
+  page: cover; 
+  content: url("images/cover.png");
+  width: 100%;
+  height: 100%; 
+}
+
+
+
+/* styles for the right hand spread
+Bottom left we display the title of the book, bottom right the page using a CSS counter, top right the content of the current chapter */
+@page:right{ 
+   @bottom-left {
+       margin: 10pt 0 30pt 0;
+       border-top: .25pt solid #666;
+	   content: "Our Cats";
+       font-size: 9pt;
+       color: #333;
+   }
+   @bottom-right { 
+       margin: 10pt 0 30pt 0;
+       border-top: .25pt solid #666;
+       content: counter(page);
+       font-size: 9pt;
+   }
+   @top-right {
+   	   content:  string(doctitle);
+   	   margin: 30pt 0 10pt 0;
+   	   font-size: 9pt;
+   	   color: #333;
+   }
+}
+
+/* styles for the left hand spread 
+Bottom right book title, bottom left current page */
+@page:left {
+
+   @bottom-right {
+       margin: 10pt 0 30pt 0;
+       border-top: .25pt solid #666;
+	     content: "Our Cats";
+       font-size: 9pt;
+       color: #333;
+   }
+   @bottom-left { 
+       margin: 10pt 0 30pt 0;
+       border-top: .25pt solid #666;
+       content: counter(page);
+       font-size: 9pt;
+   }
+}
+
+/* first page */
+@page:first {
+  @bottom-right {
+    content: normal;
+    margin: 0;
+  }
+
+  @bottom-left {
+    content: normal;
+    margin: 0;
+  }
+}
+
+/* reset chapter and figure counters on the body */
+body {
+	counter-reset: chapternum figurenum;
+	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+	line-height: 1.5;
+	font-size: 11pt;
+}
+
+/* get the title of the current chapter - this will be the content of the h1 
+reset figure counter as figures start from 1 in each chapter */
+h1 {
+    string-set: doctitle content();
+    page-break-before: always;
+    counter-reset: figurenum;
+    counter-reset: footnote;
+    line-height: 1.3;
+}
+
+/* increment chapter counter */
+h1.chapter:before {
+    counter-increment: chapternum;
+    content: counter(chapternum) ". ";
+}
+
+/* increment and display figure counter */
+figcaption:before {
+	counter-increment: figurenum;
+	content: counter(chapternum) "-" counter(figurenum) ". ";
+}
+
+/* footnotes */
+.fn {
+  float: footnote;
+}
+
+.fn {
+  counter-increment: footnote;
+}
+
+.fn::footnote-call {
+  content: counter(footnote);
+  font-size: 9pt;
+  vertical-align: super;
+  line-height: none;
+}
+
+.fn::footnote-marker {
+  font-weight: bold;
+}
+
+@page {
+  @footnotes {
+    border-top: 0.6pt solid black;
+    padding-top: 8pt;
+  }
+}
+
+h1,h2,h3,h4,h5 {
+	font-weight: bold;
+	page-break-after: avoid;
+	page-break-inside:avoid;
+}
+
+h1+p, h2+p, h3+p {
+	page-break-before: avoid;
+}
+
+table, figure {
+	page-break-inside: avoid;
+}
+
+ul.toc {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+/* create page numbers using target-counter in the TOC */
+ul.toc a::after {
+  content: leader('.') target-counter(attr(href), page);
+}
+
+ul.toc li {
+	line-height: 2;
+}
+
+ul.toc li a {
+	text-decoration: none;
+}
+
+a {
+	color: #000;
+}
+
+/* add page number to cross references */
+a.xref:after {
+  content: " (page " target-counter(attr(href, url), page) ")";
+}
+`;
+            let newContent = "<html><head><meta charset='utf-8'/><title></title>" +
+                "<style>" + css + "</style>" +
+                "</head><body>" +
+                this.previewHTML + "</body></html>";
+            let newWin = window.open();
+            newWin.focus();
+            newWin.document.write(newContent);
+            newWin.print();
+            newWin.document.close();
+            newWin.close();
         }
     }
-});
+})
+;

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)-Dev",
-  "version": "2019.09.0915",
+  "version": "2019.11.2717",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "Awesome，All In One的一个工具，包含多个独立小应用，比如：Json工具、代码美化、代码压缩、二维码、Postman、markdown、网页油猴、便签笔记、信息加密与解密、随机密码生成、Crontab等等！",