使用JS獲取一個Vue組件渲染後的內容

前言

有這麼一個需求：有一個彈窗裏面顯示的是從服務端獲取到的數據內容，可以通過某個按鈕來控制彈窗的顯示，現在的要求是直接獲取到服務端傳回來的數據內容後，然後將前端渲染後的內容通過window.print 方法打印出來。並且不能讓彈窗出現，換句話說：不能通過在彈窗中添加打印按鈕來獲取當前組件的html.

解決過程

在之前的代碼中，是將該組件的html內容重新寫一份print.js，並且將相應的style標籤內的樣式複製到print.js 文件中，這樣雖然解決了問題，但缺點是每次修改該組件後都需要同步地將相應的html內容也應用到print.js中去。
所以有沒有一種方法是可以在組件不掛載到頁面上時，就獲取到該組件渲染後的html呢？答案是：有的。
Vue有一個屬性叫：propsData，可以做到這個事情。有如下代碼：

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

export default {
	methods: {
		print() {
			// 此時SomethingDetail是一個Vue組件，下面這條語句是爲了獲取該組件的構造函數
			const Comp = SomethingDetail._Ctor[0]
			const vm = new Ctor({
				propsData: data // 從服務端獲取到的數據：data
			})
			vm.$mount()
			const html = vm.$el.outerHtml
			vm.destory()
			
			return html
		}
	}
}

此時，print 方法返回的就是該組件根據數據具體渲染後的html內容。

那組件的html文本獲取好了，樣式該如何處理呢，有沒有什麼Vue屬性是可以直接獲取該組件的樣式內容的，答案是沒有。那我們要怎麼做呢？寫一個node腳本

參考鏈接

• API:propsData