Question

我使用blueimp gallery展示了一些客户上传的图片

偶尔他们也会上传pdf文件，目前我们必须手动打开，同时非常适合在blueimp gallery中预览pdf。

从文档中我看到可以轻松地＆＃34;添加对其他内容类型的支持：

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

想象力很少......我试过了：

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无法识别并显示源代码像这样：我可以想象，至少，这是一个mime类型的问题，但我不知道如何解决它

可以建议方向吗？感谢

Answer 1

我遇到了类似的问题，这是一个可行的＆＃34;解。我正在使用ASP.Net MVC。

我检测到文件扩展名并显示静态pdf图标图像，并且在锚标记中我添加了自定义onclick事件以在新窗口中打开pdf文件。 但请确保您的pdf使用适当的标题呈现（即＆＃34; application / pdf＆＃34;）

<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语法（希望不难推断）。 让我知道是否有人有更好的解决方案。

Blueimp Gallery pdf支持

1 个答案: