代码和博客都是用了原作者的,具体请参见作者的原文:
http://www.rahulsingla.com/blog/2010/03/cross-browser-approach-to-copy-content-to-clipboard-with-javascript
http://www.rahulsingla.com/blog/2010/03/extjs-copy-gridpanel-content-to-clipboard
http://www.rahulsingla.com/blog/2010/10/extjs-copying-gridpanel-single-row-data-to-clipboard
方案就是IE下直接用javascript的window.clipboardData.setData
其他浏览器用flash+javascript实现
第1个例子:实现功能:复制文本框内的字符到剪切板
1clipboard.htm
嵌入一个flash,
关键是flashvars的回调函数callback=f1
第2个例子:实现功能:复制整个grid的数据(可以是json,csv,tsv)到剪切板
2grid-copy-clipboard.htm
关键是那个flash的xtype用的是label,然后以html的方式嵌入bbar
另外自己扩展了Ext.data.Store,增加了一个serializeData方法
第3个例子:实现功能:复制grid某一行的数据到剪切板
3grid-row-copy-clipboard.htm
关键是用了GridPanel的TemplateColumn来实现
经过测试,IE8,Firefox11,Chrome18均工作正常
发现ItEye的代码复制功能其实也是用的flash :-)
代码大家需要的话自己去附件下载吧。swf是用到的flash,html.7z里面有提到的3个html。
http://www.rahulsingla.com/blog/2010/03/cross-browser-approach-to-copy-content-to-clipboard-with-javascript
http://www.rahulsingla.com/blog/2010/03/extjs-copy-gridpanel-content-to-clipboard
http://www.rahulsingla.com/blog/2010/10/extjs-copying-gridpanel-single-row-data-to-clipboard
方案就是IE下直接用javascript的window.clipboardData.setData
其他浏览器用flash+javascript实现
第1个例子:实现功能:复制文本框内的字符到剪切板
1clipboard.htm
嵌入一个flash,
<object id='clipboard' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'>
<param name='allowScriptAccess' value='always' />
<param name='allowFullScreen' value='false' />
<param name='movie' value='clipboard.swf' />
<param name='quality' value='high' />
<param name='bgcolor' value='#ffffff' />
<param name='wmode' value='transparent' />
<param name='flashvars' value='callback=f1' />
<embed src='clipboard.swf' flashvars='callback=f1' quality='high' bgcolor='#ffffff' width='16' height='16' wmode='transparent' name='clipboard' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' />
</object>
关键是flashvars的回调函数callback=f1
function f1() {
var s = document.getElementById('text1').value;
if (window.clipboardData)
window.clipboardData.setData('text', s);
else
return s;
}
第2个例子:实现功能:复制整个grid的数据(可以是json,csv,tsv)到剪切板
2grid-copy-clipboard.htm
bbar: {
xtype: 'toolbar',
items: [{
xtype: 'label',
html: 'Select a format from above, and click the Copy button on the right here '
},
{
xtype: 'label',
html: "<object id='clipboard' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'><param name='allowScriptAccess' value='always' /><param name='allowFullScreen' value='false' /><param name='movie' value='clipboard.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#ffffff' /><param name='wmode' value='transparent' /><param name='flashvars' value='callback=f1' /><embed src='clipboard.swf' flashvars='callback=f1' quality='high' swliveconnect='true' bgcolor='#ffffff' width='16' height='16' wmode='transparent' name='clipboard' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' /></object>"
}
]
}
关键是那个flash的xtype用的是label,然后以html的方式嵌入bbar
另外自己扩展了Ext.data.Store,增加了一个serializeData方法
第3个例子:实现功能:复制grid某一行的数据到剪切板
3grid-row-copy-clipboard.htm
关键是用了GridPanel的TemplateColumn来实现
{
dataIndex: 'company',
width: 30,
xtype: "templatecolumn",
tpl: new Ext.XTemplate(
"<object id='clipboard{[this.getClipboardId(values)]}' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='16' height='16' align='middle'>",
"<param name='allowScriptAccess' value='always' />",
"<param name='allowFullScreen' value='false' />",
"<param name='movie' value='clipboard.swf' />",
"<param name='quality' value='high' />",
"<param name='bgcolor' value='#ffffff' />",
"<param name='flashvars' value='callback=f1&callbackArg={[this.getClipboardId(values)]}' />",
"<embed src='clipboard.swf' flashvars='callback=f1&callbackArg={[this.getClipboardId(values)]}' quality='high' bgcolor='#ffffff' width='16' height='16' name='clipboard{[this.getClipboardId(values)]}' align='middle' allowscriptaccess='always' allowfullscreen='false' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer' />",
"</object>",
{
getClipboardId: getClipboardId
})
}
经过测试,IE8,Firefox11,Chrome18均工作正常
发现ItEye的代码复制功能其实也是用的flash :-)
代码大家需要的话自己去附件下载吧。swf是用到的flash,html.7z里面有提到的3个html。