如何使用Liferay和JavaScript为多个文件创建下载按钮？
我试图做一个按钮时，点击，它下载的文件在一个zip文件。我试图从给定的url将文件加载到Zip中。 我正在使用Liferay 6.1 JSP文件中的脚本声明正确吗？如何使用Liferay和JavaScript为多个文件创建下载按钮？,javascript,liferay,liferay-6,jszip,Javascript,Liferay,Liferay 6,Jszip,我试图做一个按钮时，点击，它下载的文件在一个zip文件。我试图从给定的url将文件加载到Zip中。 我正在使用Liferay 6.1 JSP文件中的脚本声明正确吗？ <c:if test="<%= multi_files_urls != null && multi_files_urls.size() > 1 %>"> <aui:button onClick="downloadFiles(<%= multi_files_urls %
<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>
<footer-portlet-javascript>/js/jszip.js</footer-portlet-javascript>
/js/jszip.js
我没有检查，但看起来这完全独立于Liferay以及如何嵌入代码：错误消息说没有定义zip
。
定义zip
的唯一位置是在该函数中，它立即超出范围：
JSZip.loadAsync(data).then(function () {
var zip = new JSZip(data);
});
因此，当此代码运行时，它不在范围内：
zip.then(function(content) {
saveAs(content, "my_documents.zip");
});
您必须进一步声明zip，以便在您想要使用它时它仍然在范围内（但是，最有可能的是，在您当前初始化的位置初始化它）。由于我没有使用JSZip库的经验，并且使用了async关键字，所以我不确定仅仅重新排序是否足够，或者计时是否只会在预期使用后初始化zip
，我将把这留给您
尝试在一个HTML页面中复制，因为我不认为Liferay在游戏中带来的复杂性是导致问题的原因。这可能使它更容易理解。运行时，将其嵌入Liferay。我没有检查，但它看起来完全独立于Liferay以及如何嵌入代码：错误消息显示未定义zip
。
定义zip
的唯一位置是在该函数中，它立即超出范围：
JSZip.loadAsync(data).then(function () {
var zip = new JSZip(data);
});
因此，当此代码运行时，它不在范围内：
zip.then(function(content) {
saveAs(content, "my_documents.zip");
});
您必须进一步声明zip，以便在您想要使用它时它仍然在范围内（但是，最有可能的是，在您当前初始化的位置初始化它）。由于我没有使用JSZip库的经验，并且使用了async关键字，所以我不确定仅仅重新排序是否足够，或者计时是否只会在预期使用后初始化zip
，我将把这留给您
尝试在一个HTML页面中复制，因为我不认为Liferay在游戏中带来的复杂性是导致问题的原因。这可能使它更容易理解。运行时，将其嵌入Liferay。更新（解决方案）
1-我将js文件添加到liferay-portlet.xml文件中
<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>
/js/jquery-1.8.3.min.js
/js/jszip.js
/js/jszip-utils.js
/js/FileSaver.js
/js/downloader.js
/js/helpers.js
2-在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>
";
else if（file.getExtension（）.equalsIgnoreCase（“xlsx”）|| file.getExtension（）.equalsIgnoreCase（“xls”）|| file.getExtension（）.equalsIgnoreCase（“csv”））
excelUrl=“”；
试一试{
Map fieldsMap=file.getFieldsMap（file.getFileVersion（）.getFileVersionId（））；
对于（字段：fieldsMap.values（））{
vendor=fields.get（“vendor”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
if（供应商同等信号情况（“其他”））
logo=“其他”；
其他的
logo=“”；
technology=fields.get（“technology”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
productType=fields.get（“productType”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
flashType=fields.get（“flashType”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
}
}捕获（例外情况除外）{
例如printStackTrace（）；
}
%>
一切正常！更新（解决方案）
1-我将js文件添加到liferay-portlet.xml文件中
<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>
/js/jquery-1.8.3.min.js
/js/jszip.js
/js/jszip-utils.js
/js/FileSaver.js
/js/downloader.js
/js/helpers.js
2-在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>
";
else if（file.getExtension（）.equalsIgnoreCase（“xlsx”）|| file.getExtension（）.equalsIgnoreCase（“xls”）|| file.getExtension（）.equalsIgnoreCase（“csv”））
excelUrl=“”；
试一试{
Map fieldsMap=file.getFieldsMap（file.getFileVersion（）.getFileVersionId（））；
对于（字段：fieldsMap.values（））{
vendor=fields.get（“vendor”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
if（供应商同等信号情况（“其他”））
logo=“其他”；
其他的
logo=“”；
technology=fields.get（“technology”）.getValue（）.toString（）.replace（“[\”，”）.replace（“\”），”）；
productType=字段。获取（“