导语：在日常开发过程中，也会遇到使用系统命令的需求，比如复制一段文本什么的，现在就总结一下如何使用系统命令。

简介

document.execCommand()方法处理Html数据时常用语法格式如下:

document.execCommand(sCommand[,交互方式, 动态参数])

其中：sCommand为指令参数（如下例中的’2D-Position’），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的’false’即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的’true’）。

document.execCommand('2D-Position','false','true');

调用execCommand()可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等. 有了这个方法,就可以很容易的实现网页中的文本编辑器.

如果灵活运用,可以很好的辅助我们完成各种项目.

常用方法

使用的例子如下:

• 全选

格式: document.execCommand('selectAll')

说明: 将选种网页中的全部内容！

• 打开

格式: document.execCommand('open')

说明:这跟VB等编程设计中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。

• 另存为

格式: document.execCommand('saveAs')

说明: 将该网页保存到本地盘的其它目录！

• 打印

格式: document.execCommand('print')

说明: 当然，你必须装了打印机！

命令大全

//相当于单击文件中的打开按钮
document.execCommand('Open');

//将当前页面另存为
document.execCommand('SaveAs');

//剪贴选中的文字到剪贴板;
document.execCommand('Cut','false',null);

//删除选中的文字;
document.execCommand('Delete','false',null);

//改变选中区域的字体;
document.execCommand('FontName','false',sFontName);

//改变选中区域的字体大小;
document.execCommand('FontSize','false',sSize|iSize);

//设置前景颜色;
document.execCommand('ForeColor','false',sColor);

//使绝对定位的对象可直接拖动;
document.execCommand('2D-Position','false','true');

//使对象定位变成绝对定位;
document.execCommand('AbsolutePosition','false','true');

//设置背景颜色;
document.execCommand('BackColor','false',sColor);

//使选中区域的文字加粗;
document.execCommand('Bold','false',null);

//复制选中的文字到剪贴板;
document.execCommand('Copy','false',null);

//设置指定锚点为书签;
document.execCommand('CreateBookmark','false',sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand('CreateLink','false',sLinkURL);

//设置当前块的标签名;
document.execCommand('FormatBlock','false',sTagName);

//相当于单击文件中的打开按钮
document.execCommand('Open');

//将当前页面另存为
document.execCommand('SaveAs');

//剪贴选中的文字到剪贴板;
document.execCommand('Cut','false',null);

//删除选中的文字;
document.execCommand('Delete','false',null);

//改变选中区域的字体;
document.execCommand('FontName','false',sFontName);

//改变选中区域的字体大小;
document.execCommand('FontSize','false',sSize|iSize);

//设置前景颜色;
document.execCommand('ForeColor','false',sColor);

//使绝对定位的对象可直接拖动;
document.execCommand('2D-Position','false','true');

//使对象定位变成绝对定位;
document.execCommand('AbsolutePosition','false','true');

//设置背景颜色;
document.execCommand('BackColor','false',sColor);

//使选中区域的文字加粗;
document.execCommand('Bold','false',null);

//复制选中的文字到剪贴板;
document.execCommand('Copy','false',null);

//设置指定锚点为书签;
document.execCommand('CreateBookmark','false',sAnchorName);

//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand('CreateLink','false',sLinkURL);

//设置当前块的标签名;
document.execCommand('FormatBlock','false',sTagName);

复制粘贴版

第一种：原生

<span id="spanid">12345678</span>
<input type="button" onClick="savetext()" value="点击复制代码" />

function savetext() {
    var Url2=document.getElementById("spanid").innerText;
    var oInput = document.createElement('input');
    oInput.value = Url2;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display='none';
    alert('复制成功');
}

在这里预览 (opens new window)。

第二种：clipboard.js

• 安装clipboard

npm install clipboard --save

• 引入包

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

或者使用方法

<span class="topword">{{promocode1}}</span>
<button class="btn" @click="copyContent">Copy</button>

data () {
    return {
        clipboard: null//存到vue的data里
    }
},
copyContent() {
    this.clipboard = new ClipboardJS(".btn", {
            target: function () {
                return document.querySelector(".topword");
            }
        }
    );
    this.clipboard.on("success", function(e) {
        console.log(e.text);
        alert('复制成功了~~~~~~~~~~~~')
    });
    //如果是vue模块话开发就这样写，先require一下，然后new
    const clipboard = require("clipboard");
        this.clipboard = new clipboard (".btn", {
            target: function () {
                return document.querySelector(".topword");
            }
        }
    );
}