效果图如下所示：
实现方法：
1、下载pdfjs：pdfjs官网
2、在需要使用的页面引用pdf.js和pdf.worker.js
主要js代码块如下：
// 渲染列表
renderMulTable(files) { //files是上传的文件列表
let str = ''
let _this = this
$('.merge-files').html('')
$.each(files, function (index, item) {
str += `<li class="drag_module_main" data-id="${item.id}" draggable="false">
<div class="m-img1">
<div class="canvas-html"><div class="dot-flashing2"></div><span>加载中</span></div>
<span class="m-spn2">${item.id}</span>
<div class="m-settings">
<span class="li-update"><i class="iconfont icongenghuanwenjian"></i></span>
<span class="li-delete"><i class="iconfont iconhuishouzhan"></i></span>
</div>
</div>
<span class="m-spn1">${item.fileName}</span>
</li>`
var reader = new FileReader();
reader.readAsArrayBuffer(item.item);
reader.onload = function (e) {
var typedarray = new Uint8Array(this.result);
PDFJS.getDocument(typedarray).promise.then(function (pdf) { //PDF转换为canvas
if (pdf) {
var pages = pdf.numPages //获取pdf的页数
console.log(pages)
var canvas = document.createElement('canvas');
canvas.id = "pageNum" + 1;
var context = canvas.getContext('2d');
_this.openPage(pdf, 1, context, item.id);
}
});
};
})
$('.merge-files').append(str)
_this.drags('drag_module_main', 'drag_module_maindash', 'drag_module_dash');
},
openPage(pdfFile, pageNumber, context, id) {
var scale = 1.5;
pdfFile.getPage(pageNumber).then(function(page) {
var viewport = page.getViewport(scale); // reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "140px";
canvas.style.height = "196px";
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
window.page = window.page + 1
})
$('.drag_module_main[data-id="'+ id +'"] .canvas-html').html(canvas)
});
return;
},
drags(name, name2, name3) {
var range = {x: 0, y: 0}; // 鼠标元素偏移量
var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; // 拖拽对象的四个坐标
var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; // 目标元素对象的坐标初始化
var thidDiv = null; // 拖拽对象 拖拽状态 选中状态
//拖拽对象的索引、高度、的初始化。
var thidDivWidth = 0, thidDivHeight = 0, thidDivHalfW = 0, thidDivHalfH = 0, tarFirstX = 0, tarFirstY = 0;
var tarDiv = null, tarFirst, tempDiv; // 要插入的目标元素的对象, 临时的虚线对象
var initPos = {x: 0, y: 0}; // 记录拖拽元素初始鼠标元素偏移量
let _this = this
_this.data.isMove = false
$('.' + name).on('mousedown', function (event) {
var thee=event?event:window.event;
_this.stopBubble(thee);
window.event.cancelBubble = true;
var obj2 = $(event.target)[0].className
//处理拖拽事件中两个元素的点击事件
if(obj2 == 'li-delete' || obj2.indexOf('iconhuishouzhan') != -1){
return false
}else if(obj2 == 'li-update' || obj2.indexOf('icongenghuanwenjian') != -1) {
return false
}else {
_this.data.choose = true;
// 拖拽对象
thidDiv = $(this);
// 记录拖拽元素初始位置
initPos.x = thidDiv.offset().left;
initPos.y = thidDiv.offset().top;
// 鼠标元素相对偏移量
range.x = event.pageX - thidDiv.offset().left;
range.y = event.pageY - thidDiv.offset().top;
thidDivWidth = thidDiv.width();
thidDivHeight = thidDiv.height();
thidDivHalfW = thidDivWidth / 2;
thidDivHalfH = thidDivHeight / 2;
thidDiv.attr("class", name2);
thidDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$('<li class="' + name3 + '"></li>"').insertBefore(thidDiv);
tempDiv = $("." + name3);
$(document).on('mousemove', function (event) {
event.stopPropagation();
if (!_this.data.choose){
return false;
}
_this.data.move = true;
lastPos.x = event.pageX - range.x;
lastPos.y = event.pageY - range.y;
lastPos.x1 = lastPos.x + thidDivWidth;
lastPos.y1 = lastPos.y + thidDivHeight;
// 拖拽元素随鼠标移动
thidDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
thidDiv.find('.m-settings').hide()
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.' + name); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$main.each(function () {
tarDiv = $(this);
tarPos.x = tarDiv.offset().left;
tarPos.y = tarDiv.offset().top;
tarPos.x1 = tarPos.x + tarDiv.width() / 2;
tarPos.y1 = tarPos.y + tarDiv.height() / 2;
tarFirst = $main.eq(0); // 获得第一个元素
tarFirstX = tarFirst.offset().left + thidDivHalfW; // 第一个元素对象的中心纵坐标
tarFirstY = tarFirst.offset().top + thidDivHalfH; // 第一个元素对象的中心横坐标
// 根据 拖拽对象x坐标 与 目标元素对象x坐标 对比，来显示 虚线div 在节点前、后出现的位置
if (lastPos.x > tarPos.x) {
// 判断要插入目标元素的 坐标后， 直接插入
if (lastPos.x >= tarPos.x - thidDivHalfW && lastPos.x1 >= tarPos.x1 && lastPos.y >= tarPos.y - thidDivHalfH && lastPos.y1 >= tarPos.y1) {
tempDiv.insertAfter(tarDiv);
}
//拖拽对象 移动到第一个位置
if (lastPos.x <= tarFirstX && lastPos.y <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
} else {
//拖拽对象 移动到第一个位置
if (lastPos.x <= tarFirstX && lastPos.y <= tarFirstY) {
tempDiv.insertBefore(tarFirst);
}
// 判断要插入目标元素的 坐标后， 直接插入
if (lastPos.x >= tarPos.x - thidDivHalfW && lastPos.x1 >= tarPos.x1 && lastPos.y >= tarPos.y - thidDivHalfH && lastPos.y1 >= tarPos.y1) {
tempDiv.insertAfter(tarDiv);
}
}
});
});
$(document).on('mouseup', function (event) {
event.stopPropagation();
if (!_this.data.choose) {
return false
}
if (!_this.data.move) {
thidDiv.attr("class", name);
tempDiv.remove(); // 删除新建的虚线div
_this.data.choose = false;
return false
}
thidDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
thidDiv.attr("class", name); //恢复对象的初始样式
tempDiv.remove(); // 删除新建的虚线div
_this.data.move = false;
_this.data.choose = false;
let arr
if(_this.data.arr2.length > 0) {
arr = _this.data.arr2
_this.data.arr2 = []
}else {
arr = _this.data.allFile
}
console.log(arr)
let a = []
for(let i = 0;i < arr.length;i++) {
let index = $('.merge-files li').eq(i).attr('data-id')
if(index) {
var uploadArr = {
id: i+1,
fileSize: arr[index-1].fileSize,
fileName: arr[index-1].fileName,
item: arr[index-1].item
}
a[i] = uploadArr
_this.data.arr2.push(a[i])
}
}
console.log(_this.data.arr2)
_this.rederIndex(1)
thidDiv.find('.m-settings').show()
$(document).off();
})
}
return false
});
},
主要css代码块：
.merge-files {
display: flex;
flex-wrap: wrap;
height: 395px;
overflow: auto;
// position: relative;
li {
width: 212px;
height: 294px;
border-radius: 12px;
position: static;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: all-scroll;
&:hover {
background: rgba(176, 176, 176, 0.1);
box-shadow: 0px 4px 88px 0px rgba(176, 176, 176, 0.1);
.m-settings {
opacity: 1;
display: block;
}
.m-img1 {
margin-top: 20px;
}
}
.m-img1 {
position: relative;
width: 140px;
height: 198px;
margin-top: 20px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
img {
width: 140px;
height: 198px;
background: #fff;
}
.canvas-html {
font-size: 12px;
color: #999;
padding-top: 16px;
}
.m-spn2 {
width: 24px;
height: 24px;
background: #CCCCCC;
position: absolute;
bottom: 10px;
left: 59px;
border-radius: 50%;
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 24px;
text-align: center;
}
}
.m-spn1 {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #121213;
line-height: 20px;
padding-top: 16px;
width: 178px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;//自适应布局：链接
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
word-break: break-all
}
.m-settings {
position: absolute;
top: -15px;
left: 80px;
width: 86px;
opacity: 0;
display: none;
span {
width: 32px;
height: 32px;
background: #F7F7F7;
border-radius: 6px;
display: inline-block;
margin-right: 8px;
text-align: center;
line-height: 32px;
cursor: pointer;
i {
font-size: 20px;
}
}
}
}
.drag_module_maindash {
position: absolute;
width: 212px;
height: 294px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drag_module_dash {
width: 212px;
height: 294px;
border-radius: 12px;
position: static;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
遇到的问题:
1、npm启动报错Module not found: Error: Can’t resolve ‘fs’
在本地开发就在webpack.dev.conff.js中添加
node: {
fs: 'empty',
},
如图所示：
2、如果npm打包报错Can’t resolve ‘fs’
同上在webpack.prod.conf.js中添加相同代码块，如图
6451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
