Jquery Blueimp图库pdf支持

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

偶尔他们也上传pdf文件，目前我们必须手动打开，而如果能在blueimp gallery中预览pdf，那就太好了

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

几乎没有想象力。。。我试过：

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'
            }

        ]);
    })

css:
.blueimp gallery>.slides>.slide>.pdf内容{
溢出：自动；
保证金：60像素自动；
填充：0 60px；
最大宽度：1200px；
文本对齐：左对齐；
颜色：白色；
}
js:
blueimp.Gallery.prototype.applicationFactory=函数（obj，回调）{
变量$element=$（''）
.addClass（'pdf-content'）
.attr（“标题”，对象标题）；
$.get（obj.href）
.完成（功能（结果）{
$element.html（结果）；
回拨({
类型：“加载”，
目标：$element[0]
});
})
.fail（函数（）{
回拨({
键入：“错误”，
目标：$element[0]
});
});
返回$element[0]；
};
$（#blueimpGallery按钮）。在（'单击'）上，函数（事件）{
蓝精灵画廊([
{
标题：“测试pdf_1”，
href:'/docs/test1.pdf'，
键入：“应用程序/pdf”
},
{
标题：“测试pdf_2”，
href:'/docs/test2.pdf'，
键入：“应用程序/x-pdf”
},
{
标题：“测试pdf_3”，
href:'/docs/test3.pdf'，
键入：“应用程序/x-pdf”
}
]);
})

更出乎意料的是。。它运行，但无法识别pdf，并显示源代码 这样地： 我可以想象，至少，这是一个mime类型的问题，但我不知道如何解决它

你能建议方向吗？

---

谢谢

我遇到了类似的问题，这里有一个“可行”的解决方案。我正在使用ASP.NETMVC

我检测到文件扩展名并显示一个静态pdf图标图像，在锚标记中，我添加了一个自定义onclick事件以在新窗口中打开pdf文件。但是，请确保您的pdf以适当的标题呈现（即“应用程序/pdf”）

@{
bool IsPDF=item.FileName.ToLower（）.EndsWith（“.pdf”）；
string resul=Url.Action（“GetFile”，“MyController”）+“？”+item.CodeStr；
字符串imgURL=！IsPDF？resul:Url.Content（“~/Content/Images/pdf.png”）；
字符串目标=！IsPDF？“：“onClick=\”窗口。打开（“+resul+”，“\u blank”）\”；//SO:13335954
}

---

代码是特定于我的应用程序的，上面是Razor语法（希望不难推断）。如果有人有更好的解决方案，请告诉我。

我也面临类似的问题，这里有一个“可行”的解决方案。我正在使用ASP.NETMVC

我检测到文件扩展名并显示一个静态pdf图标图像，在锚标记中，我添加了一个自定义onclick事件以在新窗口中打开pdf文件。但是，请确保您的pdf以适当的标题呈现（即“应用程序/pdf”）

@{
bool IsPDF=item.FileName.ToLower（）.EndsWith（“.pdf”）；
string resul=Url.Action（“GetFile”，“MyController”）+“？”+item.CodeStr；
字符串imgURL=！IsPDF？resul:Url.Content（“~/Content/Images/pdf.png”）；
字符串目标=！IsPDF？“：“onClick=\”窗口。打开（“+resul+”，“\u blank”）\”；//SO:13335954
}

---

代码是特定于我的应用程序的，上面是Razor语法（希望不难推断）。如果有人有更好的解决方案，请告诉我。

试试文件上传——对不起，我不明白你的建议：也许文件上传有可以利用的隐藏功能，但我需要在gallery中显示pdf。你也有一个文件上传库+你可以上传任何文件。我想当你点击pdf查看它时，它会使用浏览器打开它。无论如何，我认为你需要把2分开。Gallery仅用于查看图像，除非有插件可添加到Gallery中打开PDF尝试文件上载-抱歉，我不明白你的建议：文件上载可能有可利用的隐藏功能，但我需要在Gallery中显示PDF文件上载中也有Gallery文件上载+你可以上载任何文件。我想当你点击pdf查看它时，它会使用浏览器打开它。无论如何，我认为你需要把2分开。Gallery仅用于查看图像，除非这里有插件可添加到galleryHi中的open PDF。谢谢您的回答，很抱歉回复太晚。事实上，我还没有找到解决方案，我目前正在关注其他问题。我一直在评估如何将pdf转换为jpg/png，但我认为这并不容易（因为在旧的asp中工作）。关于适当的标题：我添加了

'application/pdf'

作为标题，但不确定这是否足够：我认为问题就在这里：显然，该文件是正确的pdf文件：如果我在框架或页面中打开，则正确呈现。如果您有其他建议，我将不胜感激。Joe，您会惊讶地知道Safari能够以内联方式呈现pdf文件（如图像）。但其他人没有。我选择了另一个选项-我创建一个上传的pdf的图像（作为xyz.pdf.img），然后在gallery中使用该图像！现在我只能在.Net中找到一个免费的pdf图像转换工具。我的帖子：这是完全免费的，而且是ASP。。但是经典的ASP（实际上是…jscript），但是它运行得很好。那看起来很老派。此外，它似乎正在创建pdf文件-在浏览器中呈现pdf文件似乎很遥远。我使用Spire.PDF工具选择了基于图像的解决方案（前3页免费）。使用图像而不是pdf解决了所有问题。是的，老派。。但我看错了你的帖子：我知道你愿意创建pdf而不是将pdf转换成图像。我将尝试在blueimp gallery github上发布。。希望有人会回答，如果有一些好消息，我会张贴你嗨，谢谢你的回答，并为迟到的答复感到抱歉。事实上我没有

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