使用JS获取一个Vue组件渲染后的内容

前言

有这么一个需求：有一个弹窗里面显示的是从服务端获取到的数据内容，可以通过某个按钮来控制弹窗的显示，现在的要求是直接获取到服务端传回来的数据内容后，然后将前端渲染后的内容通过window.print 方法打印出来。并且不能让弹窗出现，换句话说：不能通过在弹窗中添加打印按钮来获取当前组件的html.

解决过程

在之前的代码中，是将该组件的html内容重新写一份print.js，并且将相应的style标签内的样式复制到print.js 文件中，这样虽然解决了问题，但缺点是每次修改该组件后都需要同步地将相应的html内容也应用到print.js中去。
所以有没有一种方法是可以在组件不挂载到页面上时，就获取到该组件渲染后的html呢？答案是：有的。
Vue有一个属性叫：propsData，可以做到这个事情。有如下代码：

import Vue from 'vue'
import SomethingDetail from '@/components/somethingDetail.vue'

export default {
	methods: {
		print() {
			// 此时SomethingDetail是一个Vue组件，下面这条语句是为了获取该组件的构造函数
			const Comp = Vue.extend(SomethingDetail)
			let vm = new Comp({
				propsData: data // 从服务端获取到的数据：data
			})
			// 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
			// 组件将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
			vm.$mount()
			
			const html = vm.$el.outerHtml
			
			vm.destory()
			vm = null
			
			return html
		}
	}
}

此时，print 方法返回的就是该组件根据数据具体渲染后的html内容。

那组件的html文本获取好了，样式该如何处理呢，有没有什么Vue属性是可以直接获取该组件的样式内容的，答案是没有。那我们要怎么做呢？写一个node脚本

我们在Vue组件中使用的是less语言 ，所以它的API方法：less.render非常好用。

具体思路如下：通过fs模块同步读取该组件了的内容，然后通过正则表达式/