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

最新推荐文章于 2023-05-06 21:23:52 发布

张子虚

最新推荐文章于 2023-05-06 21:23:52 发布

阅读量2.1k

点赞数

分类专栏： Vue NodeJS

本文链接：https://blog.csdn.net/ccaoee/article/details/105869174

版权

本文介绍了一个需求，即在不显示弹窗的情况下，获取并打印Vue组件根据服务端数据渲染后的HTML内容。解决方案是利用Vue的`propsData`和`$mount`属性，配合Node.js脚本来处理样式。当组件的`style`标签内容改变时，通过读取、编译Less样式并插入到打印页面中，实现了不依赖浏览器环境获取组件样式的方法。

摘要由CSDN通过智能技术生成

前言

有这么一个需求：有一个弹窗里面显示的是从服务端获取到的数据内容，可以通过某个按钮来控制弹窗的显示，现在的要求是直接获取到服务端传回来的数据内容后，然后将前端渲染后的内容通过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() 手动地挂载一个未挂载的实例。
			// 组件将被渲染为文档之外的的元素