如何使用Liferay和JavaScript为多个文件创建下载按钮？ [英] How to create a download button for multiple files using Liferay and JavaScript?
本文介绍了如何使用Liferay和JavaScript为多个文件创建下载按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在点击时尝试按下按钮，它会以zip文件的形式下载文件。我试图从给定的URL将文件加载到Zip中。
我正在使用Liferay 6.1。
JSP文件中的脚本声明是否正确？
我已经在liferay-portlet.xml中指定了jszip.js。
< footer-portlet-javascript> /js/jszip.js< / footer-portlet-javascript>
我是否必须使用Liferay AUI Taglib标签或简单的javaScript标签才能完成工作？ / p>
< aui：script>< / aui：script> 或< script type =text / javascript>< / script> 或liferay-portlet.xml
我的脚本是否可以下载多文件是否正确？
< c：if test =<％= multi_files_urls！= null& ;& multi_files_urls.size（）> 1％>>
< aui：button onClick =downloadFiles（<％= multi_files_urls％>）value =Download files>< / aui：button>
< / c：if>
< script type =text / javascript>
函数downloadFiles（multi_files_urls）{
for（var_liles_urls中的var url）
JSZipUtils.getBinaryContent（url，function（err，data）{
if（err）{
throw err;
}
JSZip.loadAsync（data）.then（function（）{
var zip = new JSZip（data）;
}）;
}）;
zip.then（function（content）{
saveAs（content，my_documents.zip）;
}）;
}
< / script>
我收到以下错误：
（索引）：1未捕获的ReferenceError：zip未定义
at downloadFiles（（index）：1）
at HTMLInputElement.onclick（（index）：1）
更新
我试过< header-portlet -javascript> /js/jszip.js< / header-portlet-javascript> 和< script type =text / javascriptsrc =<％= request。 getContextPath（）％> /js/jszip.js>< / script> 但它没有用。
我关注了此链接：无法使用在Liferay Portlet JSP页面中包含css和JS文件
解决方案
更新（解决方案）
1-我将js文件添加到liferay-portlet.xml文件中。
<页脚的portlet-JAV ascript> /js/jquery-1.8.3.min.js< /页脚的portlet-的javascript>
< footer-portlet-javascript> /js/jszip.js< / footer-portlet-javascript>
< footer-portlet-javascript> /js/jszip-utils.js< / footer-portlet-javascript>
< footer-portlet-javascript> /js/FileSaver.js< / footer-portlet-javascript>
< footer-portlet-javascript> /js/downloader.js< / footer-portlet-javascript>
< footer-portlet-javascript> /js/helpers.js< / footer-portlet-javascript>
2-在我的view.jsp
< form action =＃id =download_form>
<％
PortletURL actionURL = renderResponse.createRenderURL（）;
列表< DLFileEntry> list =（List< DLFileEntry>）request.getAttribute（listFiles）;
DateFormat dateFormat = new SimpleDateFormat（MMM yyyy）;
OrderByComparator orderByComparator = OrderByComparatorFactoryUtil.create（DLFileEntry，modifiedDate，false）;
Collections.sort（list，orderByComparator）;
％>
< p class =hideid =result>< / p>
< aui：button id =download_filestype =submitvalue =Download files>< / aui：button>
< liferay-ui：search-container iteratorURL =<％= actionURL％>
delta =10emptyResultsMessage =no-documents>
< liferay-ui：search-container-results total =<％= list.size（）％>
results =<％= ListUtil.subList（list，searchContainer.getStart（），searchContainer.getEnd（））％> />
< liferay-ui：search-container-row modelVar =file
className =DLFileEntry>
<％
ThemeDisplay themeDisplay =（ThemeDisplay）request.getAttribute（WebKeys.THEME_DISPLAY）;
String pdfUrl =，excelUrl =;
String logo =，vendor =，technology =，productType =，flashType =;
long globalGroupId = GroupLocalServiceUtil.getCompanyGroup（PortalUtil.getDefaultCompanyId（））。getGroupId（）;
if（file.getExtension（）。equalsIgnoreCase（pdf））
pdfUrl =< a target ='_ blank'href ='+ themeDisplay.getPortalURL（）+ themeDisplay .getPathContext（）+/ documents /+ globalGroupId + StringPool.SLASH + file.getUuid（）+'>< img src ='/ flash-table-portlet / images / pdf.png'width ='20px '/>< / a>;
else if（file.getExtension（）。equalsIgnoreCase（xlsx）|| file.getExtension（）。equalsIgnoreCase（xls）|| file.getExtension（）。equalsIgnoreCase（csv））
excelUrl =< a target ='_ blank'href ='+ themeDisplay.getPortalURL（）+ themeDisplay.getPathContext（）+/ documents /+ globalGroupId + StringPool.SLASH + file.getUuid（）+' >< img src ='/ flash-table-portlet / images / excel.png'width ='20px'/>< / a>;
try {
Map< String，Fields> fieldsMap = file.getFieldsMap（file.getFileVersion（）。getFileVersionId（））;
for（Fields字段：fieldsMap.values（））{
vendor = fields.get（vendor）。getValue（）。toString（）。replace（[\， ）.replace（\]，）;
if（vendor.equalsIgnoreCase（other））
logo =< strong> other< / strong>;
else
logo =< img src ='/ flash-table-portlet / images / vendor /+ vendor.toLowerCase（）+。gif'style ='max-width：120px' />中;
technology = fields.get（technology）。getValue（）。toString（）。replace（[\，）.replace（\]，）;
productType = fields.get（producttype）。getValue（）。toString（）。replace（[\，）.replace（\]，）;
flashType = fields.get（flashtype）。getValue（）。toString（）。replace（[\，）.replace（\]，）;
}
} catch（Exception ex）{
ex.printStackTrace（）;
}
％>
<％！ String file_name =; ％GT;
<％
String fileUrl = themeDisplay.getPortalURL（）+ themeDisplay.getPathContext（）+/ documents /+ globalGroupId + StringPool.SLASH + file.getUuid（）;
file_name = file.getTitle（）+。 + file.getExtension（）;
％>
< liferay-ui：search-container-column-text name =Checkbox>
< input type =checkboxdata-url =<％= fileUrl％>
name =<％= file_name％> />
< / liferay-ui：search-container-column-text>
< liferay-ui：search-container-column-text name ='date'
cssClass =txt-capitalize width-10
value =<％= dateFormat.format （file.getModifiedDate（））％> />
< liferay-ui：search-container-column-text name ='vendor'
cssClass =width-10value =<％= logo％> />
< liferay-ui：search-container-column-text name ='technology'
cssClass =width-10value =<％= technology％> />
< liferay-ui：search-container-column-text name ='product-type'
cssClass =width-12value =<％= productType％> />
< liferay-ui：search-container-column-text name ='flash-type'
cssClass =width-12value =<％= flashType％> />
< liferay-ui：search-container-column-text name ='model'
cssClass =width-25value =<％= file.getTitle（）％> />
< liferay-ui：search-container-column-text name ='executive-summary'
cssClass =width-10value =<％= pdfUrl％> />
< liferay-ui：search-container-column-text name ='excel-file'
cssClass =width-10value =<％= excelUrl％> />
< / liferay-ui：search-container-row>
< liferay-ui：search-iterator
searchContainer =<％= searchContainer％>
paginate =$ {fn：length（listFiles）ge 10}/>
< / liferay-ui：search-container>
< / form>
一切正常！
I am trying to make a button when clicking, it downloads the files in a zip file. I tried to load the files into the Zip from given url. I am using Liferay 6.1 .
Is the script declaration in the JSP file correct?
I have already specified jszip.js in liferay-portlet.xml.
<footer-portlet-javascript>/js/jszip.js</footer-portlet-javascript>
Do I have to use the Liferay AUI Taglib tag or a simple javaScript tag should do the work?
<aui:script></aui:script> or <script type="text/javascript"></script> or liferay-portlet.xml
Is my script to download multi-files correct?
<c:if test="<%= multi_files_urls != null && multi_files_urls.size() > 1 %>">
<aui:button onClick="downloadFiles(<%= multi_files_urls %>)" value="Download files"></aui:button>
</c:if>
<script type="text/javascript">
function downloadFiles(multi_files_urls) {
for (var url in multi_files_urls )
JSZipUtils.getBinaryContent(url, function(err, data) {
if(err) {
throw err;
}
JSZip.loadAsync(data).then(function () {
var zip = new JSZip(data);
});
});
zip.then(function(content) {
saveAs(content, "my_documents.zip");
});
}
</script>
I am getting the following error:
(index):1 Uncaught ReferenceError: zip is not defined at downloadFiles ((index):1) at HTMLInputElement.onclick ((index):1)
Update
I tried <header-portlet-javascript>/js/jszip.js</header-portlet-javascript> and <script type="text/javascript" src="<%=request.getContextPath()%>/js/jszip.js"></script> but it did not work.
I followed this link: Unable to include css and JS files in Liferay Portlet JSP Page
解决方案
Update (The solution)
1- I added js files to liferay-portlet.xml file.
<footer-portlet-javascript>/js/jquery-1.8.3.min.js</footer-portlet-javascript>
<footer-portlet-javascript>/js/jszip.js</footer-portlet-javascript>
<footer-portlet-javascript>/js/jszip-utils.js</footer-portlet-javascript>
<footer-portlet-javascript>/js/FileSaver.js</footer-portlet-javascript>
<footer-portlet-javascript>/js/downloader.js</footer-portlet-javascript>
<footer-portlet-javascript>/js/helpers.js</footer-portlet-javascript>
2- In my view.jsp
<form action="#" id="download_form">
<%
PortletURL actionURL = renderResponse.createRenderURL();
List<DLFileEntry> list = (List<DLFileEntry>) request.getAttribute("listFiles");
DateFormat dateFormat = new SimpleDateFormat("MMM yyyy");
OrderByComparator orderByComparator = OrderByComparatorFactoryUtil.create("DLFileEntry", "modifiedDate", false);
Collections.sort(list,orderByComparator);
%>
<p class="hide" id="result"></p>
<aui:button id="download_files" type="submit" value="Download files"></aui:button>
<liferay-ui:search-container iteratorURL="<%= actionURL %>"
delta="10" emptyResultsMessage="no-documents">
<liferay-ui:search-container-results total="<%= list.size() %>"
results="<%= ListUtil.subList(list, searchContainer.getStart(), searchContainer.getEnd()) %>" />
<liferay-ui:search-container-row modelVar="file"
className="DLFileEntry">
<%
ThemeDisplay themeDisplay = (ThemeDisplay) request.getAttribute(WebKeys.THEME_DISPLAY);
String pdfUrl = "", excelUrl = "";
String logo ="", vendor="", technology="", productType="", flashType="";
long globalGroupId = GroupLocalServiceUtil.getCompanyGroup(PortalUtil.getDefaultCompanyId()).getGroupId();
if(file.getExtension().equalsIgnoreCase("pdf"))
pdfUrl = "<a target='_blank' href='"+ themeDisplay.getPortalURL() + themeDisplay.getPathContext() + "/documents/" + globalGroupId + StringPool.SLASH + file.getUuid()+"' ><img src='/flash-table-portlet/images/pdf.png' width='20px'/> </a>";
else if(file.getExtension().equalsIgnoreCase("xlsx") || file.getExtension().equalsIgnoreCase("xls") || file.getExtension().equalsIgnoreCase("csv") )
excelUrl = "<a target='_blank' href='"+ themeDisplay.getPortalURL() + themeDisplay.getPathContext() + "/documents/" + globalGroupId + StringPool.SLASH + file.getUuid()+"' ><img src='/flash-table-portlet/images/excel.png' width='20px'/> </a>";
try{
Map<String, Fields> fieldsMap = file.getFieldsMap(file.getFileVersion().getFileVersionId());
for (Fields fields : fieldsMap.values()) {
vendor = fields.get("vendor").getValue().toString().replace("[\"", "").replace("\"]", "");
if(vendor.equalsIgnoreCase("other"))
logo="<strong>other</strong>";
else
logo = "<img src='/flash-table-portlet/images/vendor/"+vendor.toLowerCase()+".gif' style='max-width:120px' />";
technology= fields.get("technology").getValue().toString().replace("[\"", "").replace("\"]", "");
productType = fields.get("producttype").getValue().toString().replace("[\"", "").replace("\"]", "");
flashType = fields.get("flashtype").getValue().toString().replace("[\"", "").replace("\"]", "");
}
}catch(Exception ex){
ex.printStackTrace();
}
%>
<%! String file_name = ""; %>
<%
String fileUrl = themeDisplay.getPortalURL() + themeDisplay.getPathContext() + "/documents/" + globalGroupId + StringPool.SLASH + file.getUuid();
file_name = file.getTitle() + "." + file.getExtension();
%>
<liferay-ui:search-container-column-text name="Checkbox">
<input type="checkbox" data-url="<%= fileUrl %>"
name="<%= file_name %>" />
</liferay-ui:search-container-column-text>
<liferay-ui:search-container-column-text name='date'
cssClass="txt-capitalize width-10"
value="<%= dateFormat.format(file.getModifiedDate()) %>" />
<liferay-ui:search-container-column-text name='vendor'
cssClass="width-10" value="<%= logo %>" />
<liferay-ui:search-container-column-text name='technology'
cssClass="width-10" value="<%= technology %>" />
<liferay-ui:search-container-column-text name='product-type'
cssClass="width-12" value="<%= productType %>" />
<liferay-ui:search-container-column-text name='flash-type'
cssClass="width-12" value="<%= flashType %>" />
<liferay-ui:search-container-column-text name='model'
cssClass="width-25" value="<%= file.getTitle() %>" />
<liferay-ui:search-container-column-text name='executive-summary'
cssClass="width-10" value="<%= pdfUrl %>" />
<liferay-ui:search-container-column-text name='excel-file'
cssClass="width-10" value="<%= excelUrl %>" />
</liferay-ui:search-container-row>
<liferay-ui:search-iterator
searchContainer="<%= searchContainer %>"
paginate="${fn:length(listFiles) ge 10}" />
</liferay-ui:search-container>
</form>
Everything works well !
这篇关于如何使用Liferay和JavaScript为多个文件创建下载按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
