首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Blueimp画廊pdf支援

Blueimp画廊pdf支援
EN

Stack Overflow用户
提问于 2016-09-04 14:12:47
回答 1查看 1.3K关注 0票数 1

我正在使用blueimp图片库显示一些客户上传的图片

偶尔,他们也上传pdf文件,目前我们必须手动打开,而这将是伟大的预览也在蓝印画廊pdf。

从文档中我看到可以“轻松”添加对其他内容类型的支持:

https://github.com/blueimp/Gallery#example-html-text-factory-implementation

很少有想象力..。我试过:

代码语言:javascript
运行
复制
css:

.blueimp-gallery > .slides > .slide > .pdf-content {
    overflow: auto;
    margin: 60px auto;
    padding: 0 60px;
    max-width: 1200px;
    text-align: left;
    color:white;
}

js:

blueimp.Gallery.prototype.applicationFactory = function (obj, callback) {
    var $element = $('<div>')
            .addClass('pdf-content')
            .attr('title', obj.title);
    $.get(obj.href)
        .done(function (result) {
            $element.html(result);
            callback({
                type: 'load',
                target: $element[0]
            });
        })
        .fail(function () {
            callback({
                type: 'error',
                target: $element[0]
            });
        });
    return $element[0];
};

    $('#blueimpGallery-button').on('click', function (event) {
        blueimp.Gallery([
            {
                title: 'Test pdf_1',
                href: '/docs/test1.pdf',
                type: 'application/pdf'
            },
            {
                title: 'Test pdf_2',
                href: '/docs/test2.pdf',
                type: 'application/x-pdf'
            },
            {
                title: 'Test pdf_3',
                href: '/docs/test3.pdf',
                type: 'application/x-pdf'
            }

        ]);
    })

而且出乎意料的..。它运行,但pdf没有被识别,并显示如下的源代码:

我可以想象,至少,这是一个哑剧类型的问题,但我不知道如何修复它。

能指点方向吗?谢谢

EN

回答 1

Stack Overflow用户

发布于 2016-09-16 16:31:23

我面临着一个类似的问题,这是一个“可行的”解决方案。我正在使用ASP.Net MVC。

我检测到文件扩展名并显示一个静态pdf图标图像,在锚标记中,我添加了一个自定义onclick事件来打开一个新窗口中的pdf文件。但是,请确保您的pdf是用适当的头(即"application/pdf")呈现的。

代码语言:javascript
运行
复制
<span>
@{
bool IsPDF = item.FileName.ToLower().EndsWith(".pdf");
    string resURL = Url.Action("GetFile", "MyController") + "?" + item.CodeStr;
    string imgURL = !IsPDF ? resURL : Url.Content("~/Content/Images/pdf.png");
    string target = !IsPDF ? "" : " onClick=\"window.open('" + resURL + "', '_blank')\""; // SO : 13335954
 }

<a href="@resURL" @Html.Raw(target) title="@item.FileName @item.FileTypeTitle">
    <img src="@imgURL" width="150px" alt="@item.Comment" />
</a>
</span>

代码是特定于我的应用程序,上面是Razor语法(希望不难推断)。如果有人有更好的解决办法,请告诉我。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39317817

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档