工具栏中自定义导出按钮

工具栏中已经增加了自定义按钮，想请问：
1.按照文档中写的导出功能，点击后没有反应
2.怎么添加鼠标悬浮在按钮上的提示文字


=============编辑后=================

你好，关于导出按钮的 添加，你可以看看这个具体的写法：

1. <script>
   
2.         function load() {
   
3.             viewer = new ActiveReports.Viewer('#root', { language: 'zh' });                                 
   
4.             var svgExcelLogo = atob('PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA4OC4wMzAwNjYgODYiIHZlcnNpb249IjEuMSIgaWQ9InN2ZzIiIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2IiBzb2RpcG9kaTpkb2NuYW1lPSJ3b3JkLnN2ZyI+IDxtZXRhZGF0YSBpZD0ibWV0YWRhdGExMjYiPiA8cmRmOlJERj4gPGNjOldvcmsgcmRmOmFib3V0PSIiPiA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gPGRjOnRpdGxlPjwvZGM6dGl0bGU+IDwvY2M6V29yaz4gPC9yZGY6UkRGPiA8L21ldGFkYXRhPiA8ZGVmcyBpZD0iZGVmczEyNCIgLz4gPHNvZGlwb2RpOm5hbWVkdmlldyBwYWdlY29sb3I9IiNmZmZmZmYiIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxIiBvYmplY3R0b2xlcmFuY2U9IjEwIiBncmlkdG9sZXJhbmNlPSIxMCIgZ3VpZGV0b2xlcmFuY2U9IjEwIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMjgwIiBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI5NjAiIGlkPSJuYW1lZHZpZXcxMjIiIHNob3dncmlkPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMS4wOTA1OTgzIiBpbmtzY2FwZTpjeD0iMzQ0Ljg5NDQyIiBpbmtzY2FwZTpjeT0iNTMuNzUiIGlua3NjYXBlOndpbmRvdy14PSIwIiBpbmtzY2FwZTp3aW5kb3cteT0iMCIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMiIgZml0LW1hcmdpbi10b3A9IjAiIGZpdC1tYXJnaW4tbGVmdD0iMCIgZml0LW1hcmdpbi1yaWdodD0iMCIgZml0LW1hcmdpbi1ib3R0b209IjAiIC8+IDxwYXRoIGQ9Im0gNDYuMDQsMCA1Ljk0LDAgYyAwLDIuNjcgMCw1LjMzIDAsOCAxMC4wMSwwIDIwLjAyLDAuMDIgMzAuMDMsLTAuMDMgMS42OSwwLjA3IDMuNTUsLTAuMDUgNS4wMiwwLjk2IDEuMDMsMS40OCAwLjkxLDMuMzYgMC45OCw1LjA2IC0wLjA1LDE3LjM2IC0wLjAzLDM0LjcxIC0wLjAyLDUyLjA2IC0wLjA1LDIuOTEgMC4yNyw1Ljg4IC0wLjM0LDguNzUgLTAuNCwyLjA4IC0yLjksMi4xMyAtNC41NywyLjIgLTEwLjM2LDAuMDMgLTIwLjczLC0wLjAyIC0zMS4xLDAgMCwzIDAsNiAwLDkgbCAtNi4yMSwwIEMgMzAuNTMsODMuMjMgMTUuMjYsODAuNjcgMCw3OCAwLDU0LjY3IDAsMzEuMzQgMCw4LjAxIDE1LjM1LDUuMzQgMzAuNywyLjcxIDQ2LjA0LDAgeiIgaWQ9InBhdGgxMCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA1MS45OCwxMSBjIDExLDAgMjIsMCAzMywwIDAsMjEgMCw0MiAwLDYzIC0xMSwwIC0yMiwwIC0zMywwIDAsLTIgMCwtNCAwLC02IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTIgMCwtNCAwLC02IHoiIGlkPSJwYXRoNDgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMTcgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoNTgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gMjkuNjIsMjYuMzcgYyAyLjI2LC0wLjE2IDQuNTMsLTAuMyA2LjgsLTAuNDEgLTIuNjcsNS40NyAtNS4zNSwxMC45NCAtOC4wNywxNi4zOSAyLjc1LDUuNiA1LjU2LDExLjE2IDguMzIsMTYuNzYgLTIuNDEsLTAuMTQgLTQuODEsLTAuMjkgLTcuMjIsLTAuNDYgLTEuNywtNC4xNyAtMy43NywtOC4yIC00Ljk5LC0xMi41NiAtMS4zNiw0LjA2IC0zLjMsNy44OSAtNC44NiwxMS44NyAtMi4xOSwtMC4wMyAtNC4zOCwtMC4xMiAtNi41NywtMC4yMSAyLjU3LC01LjAzIDUuMDUsLTEwLjEgNy43LC0xNS4xIC0yLjI1LC01LjE1IC00LjcyLC0xMC4yIC03LjA0LC0xNS4zMiAyLjIsLTAuMTMgNC40LC0wLjI2IDYuNiwtMC4zOCAxLjQ5LDMuOTEgMy4xMiw3Ljc3IDQuMzUsMTEuNzggMS4zMiwtNC4yNSAzLjI5LC04LjI1IDQuOTgsLTEyLjM2IHoiIGlkPSJwYXRoNzIiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMjggYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoOTAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMzkgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoMTA4IiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzdHlsZT0iZmlsbDojMjA3MjQ1IiAvPiA8cGF0aCBkPSJtIDYzLjk4LDUwIGMgNC42NywwIDkuMzMsMCAxNCwwIDAsMi4zMyAwLDQuNjcgMCw3IC00LjY3LDAgLTkuMzMsMCAtMTQsMCAwLC0yLjMzIDAsLTQuNjcgMCwtNyB6IiBpZD0icGF0aDExNCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA2My45OCw2MSBjIDQuNjcsMCA5LjMzLDAgMTQsMCAwLDIuMzMgMCw0LjY3IDAsNyAtNC42NywwIC05LjMzLDAgLTE0LDAgMCwtMi4zMyAwLC00LjY3IDAsLTcgeiIgaWQ9InBhdGgxMjAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDwvc3ZnPg==');
   
5.             var svgHTMLLogo = atob('PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+ICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzE1N0VGQjt9IDwvc3R5bGU+PHRpdGxlPjwvdGl0bGU+PGRlc2M+PC9kZXNjPjxnIGlkPSJQYWdlLTEiPiA8ZyBpZD0iaWNvbi03Ni1kb2N1bWVudC1maWxlLWh0bWwiPiA8cGF0aCBpZD0iZG9jdW1lbnQtZmlsZS1odG1sIiBjbGFzcz0ic3QwIiBkPSJNMTksMjZ2MmMwLDEuMS0wLjksMi0yLDJIMmMtMS4xLDAtMi0wLjktMi0yVjVjMC0xLjEsMC45LTIsMi0yaDEwdjYgYzAsMS4xLDAuOSwyLDIsMmg1djJINmMtMS43LDAtMywxLjMtMywzdjdjMCwxLjcsMS4zLDMsMywzSDE5TDE5LDI2TDE5LDI2eiBNMTMsM3Y2YzAsMC42LDAuNSwxLDEsMWg1TDEzLDNMMTMsM3ogTTYsMTQgICAgYy0xLjEsMC0yLDAuOS0yLDJ2N2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi03YzAtMS4xLTAuOS0yLTItMkg2TDYsMTR6IE0yOSwyMnYxaC01di03aDF2NkgyOUwyOSwyMnogTTE0LDE3djZoMXYtNiBoMnYtMWgtNXYxSDE0TDE0LDE3eiBNMTAsMTl2LTNoMXY3aC0xdi0zSDd2M0g2di03aDF2M0gxMEwxMCwxOXogTTIwLjUsMTlMMTksMTZoLTAuNUgxOHY3aDF2LTVsMSwyaDAuNUgyMWwxLTJ2NWgxdi03aC0wLjVIMjIgTDIwLjUsMTlMMjAuNSwxOXoiLz48L2c+PC9nPjwvc3ZnPg==');    //pdfExportButton using iconCssClass
   
6.             //pdfExportButton using iconCssClass
   
7.             pdfExportButton = {
   
8.                 key: 'pdfExternalExportButton',
   
9.                 iconCssClass: 'mdi mdi-file',
   
10.                 text: "PDF Export",
    
11.                 title: "PDF Export",
    
12.                 checked: true,
    
13.                 enabled: true,
    
14.                 action: function (item) {
    
15.                     var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
    
16.                     var cancelCallback = function () {
    
17.                         return false;
    
18.                     }
    
19.                     viewer.export('pdf', settings, { cancel: cancelCallback })
    
20.                         .then(result => result.download("Exported_PDF"));
    
21.                 }
    
22.             };
    
23.             //xlsxExportButton using svg icon
    
24.             xlsxExportButton = {
    
25.                 key: 'xlsxExternalExportButton',
    
26.                 icon: { type: 'svg', content: svgExcelLogo },
    
27.                 title: "Excel Export",
    
28.                 checked: true,
    
29.                 enabled: true,
    
30.                 action: function (item) {
    
31.                     var settings = { creator: 'Jack', password: 'Pwd' };
    
32.                     var cancelCallback = function () {
    
33.                         return false;
    
34.                     }
    
35.                     viewer.export('xlsx', settings, { cancel: cancelCallback })
    
36.                         .then(result => result.download("Exported_XLSX"));
    
37.                 }
    
38.             };
    
39.             //htmlExportButton using svg icon
    
40.             htmlExportButton = {
    
41.                 key: 'htmlExternalExportButton',
    
42.                 icon: { type: 'svg', content: svgHTMLLogo },
    
43.                 title: "HTML Export",
    
44.                 checked: true,
    
45.                 enabled: true,
    
46.                 action: function (item) {
    
47.                     var settings = { autoPrint: 'true' };
    
48.                     var cancelCallback = function () {
    
49.                         return false;
    
50.                     }
    
51.                     viewer.export('html', settings, { cancel: cancelCallback })
    
52.                         .then(result => result.download("Exported_HTML"));
    
53.                 }
    
54.             };                     
    
55.             viewer.toolbar.addItem(pdfExportButton);
    
56.             viewer.toolbar.addItem(xlsxExportButton);
    
57.             viewer.toolbar.addItem(htmlExportButton);
    
58.             //调整工具栏的按钮的显示顺序和显示的按钮，可以根据自己的需求进行工具栏的调整。
    
59.            viewer.toolbar.updateLayout({
    
60.                 default: ['xlsxExternalExportButton', '$navigation', '$history', '$fullscreen', '$split', '$print', '$refresh', '$galleymode', '$mousemode', '$split', '$continuousmode', '$singlepagemode', '$zoom', 'htmlExternalExportButton', 'pdfExternalExportButton', '$split'],               
    
61.             });
    
62.             viewer.registerFont("fonts/fontsConfig.json").then(function () { viewer.open("Quotation.rdlx-json") });
    
63. 
    
64.          
    
65.         }
    
66.     </script>

复制代码

KearneyKang 发表于 2020-7-30 17:44
你好，关于导出按钮的 添加，你可以看看这个具体的写法：

非常感谢，按钮的悬浮提示已经解决了，不过我按照您的写法写了导出还是实现不了，麻烦您再看一下我的代码，我修改在原帖中了

你好，这个你给的截图，看起来没有问题，但是估计写法那有一点不对，比如符号什么的，你把我提供的代码直接放到你的页面去试试，因为这是我在我本地试了是可以正常导出来的。你好好试试