我正在使用blueimp图片库显示一些客户上传的图片
偶尔,他们也上传pdf文件,目前我们必须手动打开,而这将是伟大的预览也在蓝印画廊pdf。
从文档中我看到可以“轻松”添加对其他内容类型的支持:
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没有被识别,并显示如下的源代码:
我可以想象,至少,这是一个哑剧类型的问题,但我不知道如何修复它。
能指点方向吗?谢谢
发布于 2016-09-16 16:31:23
我面临着一个类似的问题,这是一个“可行的”解决方案。我正在使用ASP.Net MVC。
我检测到文件扩展名并显示一个静态pdf图标图像,在锚标记中,我添加了一个自定义onclick事件来打开一个新窗口中的pdf文件。但是,请确保您的pdf是用适当的头(即"application/pdf")呈现的。
<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语法(希望不难推断)。如果有人有更好的解决办法,请告诉我。
https://stackoverflow.com/questions/39317817
复制相似问题