margin: 0px; padding: 10px 0px 5px; font-size: 14px; color: rgb(37, 37, 37); font-family: arial, "microsoft yahei", 宋体, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">先说一下我的整体方案：
用到了clipboard插件，官方地址和github地址，也可以参考中文说明。
clipboard插件实测：在PC端的浏览器（试了mac上的safari,chrome,firefox）可用，iOS 10.3上的safari可用，手机上的微信QQ浏览器能用，安卓手机自带的浏览器以及UC，不可用。所以对不可用的设备，采用弹层，长按手动复制的方法。
这里需要注意一点，当需要获取的 标签 为dispaly:none 的时候data-clipboard-target的方式得不到值，可用data-clipboard-text结合下面的方法。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
代码如下：
html>
<meta>
<meta>
<meta>
<title>复制</title>
<style>
.show {
display: block;
}
.hidden {
display: none;
}
#divLayer {
background-color: rgba(204, 204, 204, 0.7);
width: 100%;
height: 100%;
position: fixed; /* 用absolute的话，当页面过长，下面的部分不会覆盖。*/
left: 0px;
top: 0px;
}
#centerLayer {
background-color: white;
margin-top: 150px;
width: 100%;
height: 208px;
text-align: center;
}
</style>
<script>
function showLayer() {
document.getElementById("divLayer").className="show";
}
function closeLayer() {
document.getElementById("divLayer").className="hidden";
}
</script>
<div>
<div>
<div>请长按选中下面虚线框中的内容进行复制：</div>
<div>
<span>hello world!</span>
</div>
<button>点击关闭</button>
</div>
</div>
<button>复制</button>
<script></script>
<script>
//dispaly:none 的时候 data-clipboard-target 得不到值，所以通过下面的方法更改。
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //清除选择
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
showLayer();
});
</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
