如何使用 Liferay 和 JavaScript 创建多个文件的下载按钮？

Question

我试图在点击时创建一个按钮，它将文件下载到一个 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 标签才能完成工作？

<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">
 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>

我收到以下错误：

(index):1 Uncaught ReferenceError: zip is not defined at downloadFiles ((index):1) at HTMLInputElement.onclick ((index):1)

更新

我尝试了 <header-portlet-javascript>/js/jszip.js</header-portlet-javascript> 和 <script type="text/javascript" src="<%=request.getContextPath()%>/js/jszip.js"></script> 但没有用。

我关注了这个link：Unable to include css and JS files in Liferay Portlet JSP Page

Answer 1

我没有检查，但看起来这完全独立于 Liferay 以及您如何嵌入代码：错误消息说 zip is not defined。唯一定义 zip 的地方是在这个函数内，它立即超出范围：

 JSZip.loadAsync(data).then(function () {
    var zip = new JSZip(data);
 });

因此，当这段代码运行时它不在范围内：

 zip.then(function(content) {
    saveAs(content, "my_documents.zip");
 });

您必须进一步声明 zip，以便在您想要使用它时它仍在范围内（但很可能，initialize 它是你当前初始化的地方）。由于我没有使用 JSZip 库的经验并且使用了 async 关键字，所以我不确定仅重新排序是否足够，或者时间是否仅在其预期使用后才初始化 zip - 我将离开这个由你决定。

尝试在单个 HTML 页面中重现，因为我看不出 Liferay 给游戏带来的复杂性会导致您的问题。这可能会使它更容易理解。运行时，将其嵌入 Liferay。

Answer 2

更新（解决方案）

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>

2- 在我的 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>

一切正常！

如何使用 Liferay 和 JavaScript 创建多个文件的下载按钮？

How to create a download button for multiple files using Liferay and JavaScript?

javascript

liferay

liferay-6

jszip

更新

更新（解决方案）