vue框架下浏览器打印部分页面功能

业务情景

• 需要在vue框架下spa应用中，使用浏览器打印下面这种格式的外卖小票
  

方案

1. 使用 jq 的 jq-print 的框架：npm 库中没有，需要手动引用，且版本更新不方便，故放弃
2. 使用 window.print() 方法：
   1. 在同一个窗口下，先将 body 和要打印的内容用变量存储，然后将页面的 body 里面的内容替换为要打印的内容，使用打印，然后返回原来 body 内容：

   let doc_body = document.body.innerHTML,
   	printPart = document.query('#some-part').innerHTML;
   document.body.innerHTML = printPart;
   window.print();//只能打印当前页面body里面的全部内容，所以打印之前，要替换body里面的内容
   document.body.innerHTML = doc_body;
   window.location.reload(false);//重新刷新页面的时候会出现首页白屏，用户体验不好
   

   2. 将要打印的内容存为模板字符串，打开一个新的窗口，将新的窗口的 body 部分替换为模板内容，打印，最后关闭窗口：

   let printPart,
   	newTab;
   printPart = `
   	...
   `;//需要打印的模板，需要将样式写为行内样式，或者将样式存为单独的文件，然后在新页面中引用
   newTab = window.open('_blank');
   newTab.document.body.innerHTML = printPart;
   newTab.print();
   newTab.close();