最近連絡したnode + expressプロジェクトには、オンラインプレビューとダウンロード機能が必要です。たくさんの努力の末、私はついにほぼ同じように書きました。要約は次のとおりです。
1つ：まず、URLでプレビューします（将来、Wordファイルとxlsxファイルもプレビューする可能性があります。この方法は使用できず、別の方法を見つける必要があります）
- 今回はインターフェースは呼び出されませんが、リストの操作欄にプレビューボタンがあります。次に、バックエンドは、リスト内の各データでファイルのURL、タイプ、およびIDを返します。
- プレビューをクリックすると、表示するポップアップボックスが必要です。これがlayuiのモーダルボックスです。
- ファイルのURLを取得し、ポップアップが完了したら、ポップアップの要素にURLを割り当てます。（私たちのプロジェクトでは、N個のファイルをプレビューしたいので、ポップアップボックスでカルーセルコンポーネントを使用します）
- 画像の場合はファイルタイプを判断します。画像の場合はimgのsrcに割り当てます。pdfの場合はオブジェクトのデータに割り当てます。
- URLに値が割り当てられている限り、URLを使用できる限り、誤ってプレビューすることができます（スタイルが含まれている場合は自分でデバッグできます）
2：2つ目は、プレビューURLを使用してダウンロード機能を実現することです。（プロテストの写真とPDFが実行可能です）
- このURLはプレビュー用であるため、通常のリンクやiframeなどを使用することはできません。
- パスを取得したら、最初にフロントエンドでパスをオンにし、ファイルストリームに変換してから、リンクを使用してダウンロードできます。
3：テクスチャ
4：コードを貼り付けます（これは私自身のプロジェクトのコードです。上記のアイデアを見ることができます）
<!-- 预览弹框 -->
<div id="previewBox" style="display: none;">
<div class="layui-carousel" id="test1">
<div class="previewCarousel" carousel-item style="overflow: scroll;">
<!-- 预览的内容 -->
</div>
</div>
</div>
// 文件预览
function filePreview(data) { // data是列表数据
// 点击预览按钮
$('.previewApt').on('click',function(){
var qInfoIDFlag = $(this).data('flie');
var attachmentArr = [];
data.forEach(function(item){
if(item.QInfoID == qInfoIDFlag){
attachmentArr = item.Attachment;
return;
}
})
$('#test1 .previewCarousel').empty(); // 销毁预览容器里的所有元素
var addOpenedit = layer.open({
type: 1,
title: "预览",
closeBtn: 1,
skin: "pop-set",
area: ["1000px","700px"],
maxHeight:"800px",
moveType: 1,
resize: false,
isOutAnim: true,
scrollbar: true,
anim: 1,
content: $('#previewBox').html(),
success: function (layero, index) {
var children = '',content = '';
attachmentArr.forEach(function(item){
if(item.FileSuffix == 'pdf'){
content = '<div><div style="width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 18px;font-weight: 700;">'+item.FileName+'.'+item.FileSuffix+'<a data-flieurl="'+item.WaterUrl+'" data-fliename="'+item.FileName+'.'+item.FileSuffix+'" class="downloadFlie" style="color: blue;font-size: 12px;font-weight: 500;margin-left: 50px;cursor: pointer;">点击下载...</a></div><object type="text/x-scriptlet" data="'+item.WaterUrl+'" width=100% height=570 id="content_info"></object></div>'
}else{
content = '<div><div style="width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 18px;font-weight: 700;">'+item.FileName+'.'+item.FileSuffix+'<a data-flieurl="'+item.WaterUrl+'" data-fliename="'+item.FileName+'.'+item.FileSuffix+'" class="downloadFlie" style="color: blue;font-size: 12px;font-weight: 500;margin-left: 50px;cursor: pointer;">点击下载...</a></div><img style="width: 100%;" src="'+item.WaterUrl+'" alt="附件预览" /></div>'
}
children += '<div>'+content+'</div>';
})
$('#test1 .previewCarousel').append(children);
//建造实例
carousel.render({
elem: $(layero).find('#test1')
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
,height:'620px'
,autoplay:false
,anim: 'fade' //切换动画方式
});
$(layero).find('.downloadFlie').on('click',function(){
var flieurl = $(this).data('flieurl');
var fliename = $(this).data('fliename');
getFileAndDownload(fliename,flieurl);
})
// console.log(layero, index);
$(layero).find('.returnBtn').on('click', function () {
layer.close(index);
})
$(layero).find('.register-sub a').attr('href','javascript:void(0)').on('click', function () {
layer.close(index);
})
// 下载方法
function getFileAndDownload(fileName, url) {
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = 'blob';
x.onload = function (e) {
var blob = x.response;
if ('msSaveOrOpenBlob' in navigator) {//IE导出
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
else {
var a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
$("body").append(a);
a.click();
$(a).remove();
}
};
x.send();
}
}
});
})
}