使用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模块同步读取该组件了的内容，然后通过正则表达式/<style lang="less" scoped>([\w\W]+)<\/style>/过滤出 style 标签内的内容，调用less.render方法将less样式内容编译为css样式内容，通过fs模块同步读取打印功能的页面，将编译好的css样式内容写入到相关的占位符中。
最后，在每次该组件的 style 标签内的内容发生变化时，都在提交前手动执行一次该脚本即可。
有如下脚本代码：
const fs = require('fs')
const less = require('less')
try {
const raw = fs.readFileSync(
'./somethingDetail.vue',
'utf8'
)
const styleContent = raw.match(/<style lang="less" scoped>([\w\W]+)<\/style>/)
console.log('style content:\n', styleContent[1])
less.render(styleContent[1]).then(result => {
const renderedCSS = result.css.replace(/(\d+)px/g, (match, g) => {
return `${g}pt`
})
console.log('render result:\n', renderedCSS)
const printPath = './print.js'
const printRaw = fs
.readFileSync(printPath, 'utf8')
.replace(
/\/\/ <==default css start==> \/\/([\w\W]+)\/\/ <==default css end==> \/\//,
() => {
return `// <==default css start==> //\nconst defaultStyle = \`${renderedCSS}\`\n// <==default css end==> //`
}
)
fs.writeFile(printPath, printRaw, { encoding: 'utf8', flag: 'w' }, err => {
if (err) {
throw new Error(err)
}
console.log('sync print style successfully!')
})
})
} catch (err) {
console.log('sync failed!\n', err)
}
讨论
此时，我们终于可以通过JS获取到Vue组件渲染后的html字符串，和相应的样式内容。不完美的地方在于获取样式内容需要依赖NodeJS环境中的fs模块，所以你不能在浏览器环境下直接地获取某Vue组件的样式内容。
