前端vue复制html元素到word中,并保留样式

<template>
	<div>
		<div v-html="html" id="copy-box">
			<img src="https://newbbs-fd.zol-img.com.cn/t_s1200x5000/g7/M00/09/06/ChMkLGOVx0aIQevNAAMVS0oNN1EAAKk2QDJVP4AAxVj249.jpg">
			<h1>我是标题</h1> 
			<p style="color: blue; font-style: italic;">我是文本。</p> 
			
		</div>
		<div @click='copyToWord'>按钮</div>
	</div>
</template>
<script>
	export default {
		methods:{
			//可以复制文本样式和图片,                视屏元素有待研究
			copyToWord(){
      			let source = document.getElementById('copy-box');// 获取样式文本所在的容器元素   或者你可以用$refs
      			let range = document.createRange();// 创建一个范围对象
		        let selection = window.getSelection();// 获取当前选区
		        range.selectNodeContents(source);// 将source容器中的所有内容插入范围对象
		        selection.removeAllRanges(); // 先清除选区内容
		        selection.addRange(range); // 将范围对象添加到选区
		        document.execCommand('copy');// 执行浏览器复制操作
		        selection.removeAllRanges();// 清除选区内容
		        alert('复制成功');//提示用户复制成功
			}
		}
	}
</script>
<style>
#copy-box{
	border: 1px solid #ccc;
	width: 1200px;
	height:600px;
}
</style>