附件图片pdf在线预览

最新推荐文章于 2024-06-14 10:00:41 发布

LKnology

最新推荐文章于 2024-06-14 10:00:41 发布

阅读量67

点赞数

文章标签： pdf vue.js javascript

本文链接：https://blog.csdn.net/LKnology/article/details/134927629

版权

dialog详情

html

<el-form-item label="划拨依据：">

<span class="detail-col">{{ formData.hbyj }}</span>

<DcqFileList :fileList="hbyjList" />

</el-form-item>

引用组件

import DcqFileList from '@comp/dcq/DcqFileList'

js

data(){

return {

typeCodes: ['zchb_hbyj', 'zchb_hbjl', 'zchb_qzt'],

hbyjList: [],

}

}

props: {

selectedRowData: {

required: true,

},

},

mounted() {

this.formData = this.selectedRowData//父级组件传递的数据

this.getAttachment(this.selectedRowData.id)

},

methods:{

getAttachment(id) {

getFileList({

id,

typeCodes: this.typeCodes,

currentPage: 0,

pageSize: 0,

}).then((res) => {

if (res.code == 200) {

this.hbyjList = res.data['zchb_hbyj'].map((o) => ({ ...o, name: o.filename }))

this.hbjlList = res.data['zchb_hbjl'].map((o) => ({ ...o, name: o.filename }))

this.qztList = res.data['zchb_qzt'].map((o) => ({ ...o, name: o.filename }))

}

})

},

}

DcqFileList 组件

<template>

<div class="dcq-file-list">

<div v-for="(item, index) in files" :key="index" v-loading="item.loading" class="file-item">

<i class="el-icon-document" style="margin: auto 5px auto 0" />

//查看图片文件

<span class="file-name" @click="handleView(item)">{{ item.filename }}</span>

<i title="下载" class="el-icon-download action-btn" @click="handleDownload(item)" />

</div>

<template>

<imageViewerVue

v-if="showViewer"

:zIndex="99999"

:on-close="closeViewer"

:url-list="imageList"

:initial-index="imageIndex"

/>

</template>

<FilePreViewDialog ref="FilePreViewDialog" />

</div>

</template>

js

<script>

import { downloadFileById, getFileList } from '@/api/fileApi.js' //接口

import imageViewerVue from 'element-ui/packages/image/src/image-viewer.vue'//预览组件

import FilePreViewDialog from '@comp/dcq/FilePreViewDialog'

export default {

components: {

imageViewerVue,

FilePreViewDialog

},

props: {

fileList: {

typeof: Array,

default() {

return []

},

},

iid: {

typeof: String,

default() {

return ''

},

},

typecode: {

typeof: String,

default() {

return ''

},

},

},

data() {

return {

showViewer: false,

imageType: ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG'],

imageList: [],

files: [],

imageIndex: 0,

}

},

watch: {

iid(nval, oval) {

console.log("iid",nval)

this.getFileList()

},

fileList(nval, oval) {

console.log("fileList",nval)

if (this.fileList && this.fileList.length > 0) {

this.fileList.forEach((element) => {

element.loading = false

})

}

this.files = this.fileList

},

},

mounted() {

if (this.fileList && this.fileList.length > 0) {

this.fileList.forEach((element) => {

element.loading = false

})

}

console.log("typecode",this.typecode)

this.files = this.fileList?this.fileList:[]

this.getFileList()

},

methods: {

closeViewer() {

this.showViewer = false

},

async handleDownload(file) {

let params = { id: file.id, fileName: file.filename }

if (file.typeCode == 'ht_jbzl') {

params.waterMark = 1

}

file.loading = true

await downloadFileById(params)

file.loading = false

},

handleView(file) {

this.$refs.FilePreViewDialog.show(file, this.files)

},

getFileList() {

let _this = this

// _this.showViewer=true

if (_this.iid && _this.typecode) {

let typeCodes = [_this.typecode]

getFileList({

id: _this.iid,

typeCodes: typeCodes,

currentPage: 0,

pageSize: 0,

}).then((res) => {

if (res.code == 200) {

let files = res.data[_this.typecode].map((o) => ({ ...o, name: o.filename, loading: false, index: 0 }))

files.forEach((file) => {

if (_this.imageType.indexOf(file.fileType) > -1) {

file.index = 1

}

})

_this.files = files.sort((a, b) => b.index - a.index)

_this.imageList = []

_this.files.forEach((file) => {

if (_this.imageType.indexOf(file.fileType) > -1) {

_this.imageList.push('/file' + file.filepath.substring(3, file.filepath.lenght).replace(/\\/g, '/'))

}

})

}

})

} else {

_this.imageList = []

_this.files = []

}

},

},

}

</script>

css

<style lang="less" scoped>

.dcq-file-list {

.file-item {

display: flex;

overflow: hidden;

cursor: pointer;

padding: 0 5px;

margin-top: 5px;

line-height: 40px;

color: @primary-color;

&:first-child {

margin-top: 0;

}

&:hover {

background-color: #f5f7fa;

.file-name {

color: @primary-color;

}

.action-btn {

display: inline-block;

}

}

.file-name {

// flex: 1;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.action-btn {

// display: none;

margin: auto 0;

margin-left: 5px;

padding: 5px;

&:hover {

color: @primary-color;

font-size: 16px;

}

}

}

}

</style>

FilePreViewDialog 组件

html

<template>

<el-dialog

:title="filename"

:visible.sync="dialogVisible"

:close-on-click-modal="false"

:modal-append-to-body="false"

:append-to-body="true"

@close="handleClose"

fullscreen

class="viewItemFileDialog"

>

<el-carousel

arrow="always"

:loop="false"

:autoplay="false"

class="wraper"

@change="fileChange"

:initial-index="initialIndex"

indicator-position="outside"

>

<el-carousel-item v-for="(item, index) in allFileList" :key="index">



<template

v-if="type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'JPG' || type == 'JPEG' || type == 'PNG'"

>



<el-image :src="imgUrl" :preview-src-list="srcList" />

</template>



<template v-if="type == 'xls' || type == 'xlsx'">

<div class="excel-view-container">

<div id="excelView" v-html="excelView"></div>

</div>

</template>



<template v-if="type == 'pdf'">

<iframe :src="pdfurl" type="application/x-google-chrome-pdf" width="100%" height="100%" />

</template>



</el-carousel-item>

</el-carousel>

</el-dialog>

</template>

js

<script>

import { downFilePlus } from '@/api/manage'

import XLSX from 'xlsx'

export default {

data() {

return {

type: '',

dialogVisible: false,

imgUrl: '',

pdfurl: '',

excelView: '',

html: '',

filename: '',

srcList: [],

loading: false,

allFileList: [],

initialIndex: 0,

}

},

methods: {

show(file, allFileList) {

this.allFileList = allFileList

this.dialogVisible = true

this.initialIndex = allFileList.findIndex((o) => o.id == file.id)

this.$nextTick(() => {

this.init(file)

})

},

handleClose() {

this.type = ''

this.imgUrl = ''

this.pdfurl = ''

this.excelView = ''

this.html = ''

this.filename = ''

this.srcList = []

this.dialogVisible = false

this.allFileList = []

this.initialIndex = 0

},

fileChange(i) {

let item = this.allFileList[i]

this.init(item)

},

// 前一个页面调用的init 我在前一个页面根据文件名字后缀已经判断是什么类型的文件了

init({ fileType, id, filename } = {}) {

this.filename = filename

let type = fileType

let fileUrl = '/zgszh/annex/downloadfileById?id=' + id

if (type == 'doc' || type == 'docx') {

type = 'pdf'

fileUrl = '/zgszh/annex/getPdfFile/' + id

}

this.type = type

if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'JPG' || type == 'JPEG' || type == 'PNG') {

this.imgUrl = fileUrl

this.srcList = [fileUrl]

} else if (type == 'pdf') {

this.loading = true

downFilePlus(fileUrl)

.then((data) => {

if (!data || data.size === 0) {

Vue.prototype['$message'].warning('文件下载失败')

return

}

if (typeof window.navigator.msSaveBlob !== 'undefined') {

window.navigator.msSaveBlob(new Blob([data]), fileName)

} else {

let url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf', charset: 'utf-8' }))

this.pdfurl = url

}

})

.finally(() => {

this.loading = false

})

} else if (type == 'xls' || type == 'xlsx') {

this.loading = true

//表格

var that = this

downFilePlus(fileUrl)

.then((res) => {

console.log(res)

if (res) {

const reader = new FileReader()

//通过readAsArrayBuffer将blob转换为ArrayBuffer对

reader.readAsArrayBuffer(res) // 这里的res.data是blob文件流

reader.onload = (event) => {

// 读取ArrayBuffer数据变成Uint8Array

let data1 = new Uint8Array(event.target.result)

// 这里的data里面的类型和后面的type类型要对应

var workbook = XLSX.read(data1, { type: 'array', cellText: false })

var sheetNames = workbook.SheetNames // 工作表名称

var worksheet = workbook.Sheets[sheetNames[0]]

let html = XLSX.utils.sheet_to_html(worksheet)

this.excelView = html

this.$nextTick(function () {

// DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。

this.setStyle4ExcelHtml()

})

}

} else {

that.$message.error({ title: '失败', message: '接口请求失败' })

that.loading = false

}

})

.catch(function (error) {

that.$message.error({ title: '失败', message: '接口请求失败' })

console.log(error)

that.loading = false

})

.finally(() => {

this.loading = false

})

}

// else if (type == 'doc' || type == 'docx') {

// this.type = 'pdf'

// downFilePlus('/zgszh/annex/getPdfFile/' + id).then((data) => {

// if (!data || data.size === 0) {

// Vue.prototype['$message'].warning('文件下载失败')

// return

// }

// if (typeof window.navigator.msSaveBlob !== 'undefined') {

// window.navigator.msSaveBlob(new Blob([data]), fileName)

// } else {

// let url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf', charset: 'utf-8' }))

// this.pdfurl = url

// }

// })

// }

this.dialogVisible = true

},

// 设置Excel转成HTML后的样式

setStyle4ExcelHtml() {

const excelViewDOM = document.getElementById('excelView')

if (excelViewDOM) {

const excelViewTDNodes = excelViewDOM.getElementsByTagName('td') // 获取的是HTMLConnection

if (excelViewTDNodes) {

const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes)

for (const i in excelViewTDArr) {

const id = excelViewTDArr[i].id // 默认生成的id格式为sjs-A1、sjs-A2......

if (id) {

const idNum = id.replace(/[^0-9]/gi, '') // 提取id中的数字，即行号

if (idNum && (idNum === '1' || idNum === 1)) {

// 第一行标题行

excelViewTDArr[i].classList.add('class4Title')

}

if (idNum && (idNum === '2' || idNum === 2)) {

// 第二行表头行

excelViewTDArr[i].classList.add('class4TableTh')

}

}

}

}

}

},

},

}

</script>

css

<style lang="less" scoped>

.viewItemFileDialog {

.image {

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

div {

height: 600px;

width: 600px;

}

}

.divContent {

display: flex;

align-items: center;

justify-content: center;

}

/deep/ .el-dialog {

display: flex;

flex-direction: column;

.el-dialog__footer {

margin-bottom: 30px;

padding: 0px;

}

}

/deep/ .el-dialog__body {

flex: 1;

overflow: hidden;

padding: 0;

position: relative;

}

}

.viewItemFileDialog {

/deep/ table {

width: 100% !important;

border-collapse: collapse !important;

border-spacing: 0 !important;

text-align: center !important;

// border: 0px !important;

border: 1px solid gray;

overflow-x: auto !important;

}

/deep/ table tr td {

/* border: 1px solid gray !important; */

border-right: 1px solid gray !important;

border-bottom: 1px solid gray !important;

width: 300px !important;

height: 33px !important;

}

/**整体样式 */

/deep/ .excel-view-container {

background-color: #ffffff;

padding: 20px;

height: 100%;

overflow: auto;

}

/**标题样式 */

/deep/ .class4Title {

font-size: 22px !important;

font-weight: bold !important;

padding: 10px !important;

}

/**表格表头样式 */

/deep/ .class4TableTh {

/* font-size: 14px !important; */

font-weight: bold !important;

padding: 2px !important;

background-color: #ccc !important;

}

}

</style>

<style lang="less">

.viewItemFileDialog {

overflow: hidden;

.el-dialog__header {

// padding: 10px 20px 10px;

background-color: @primary-color;

}

.el-dialog__header .el-dialog__title {

font-size: 15px;

color: #ffffff;

font-weight: 700;

}

.dialog-footer {

display: flex;

justify-content: center;

}

.search-btn {

background: #19a8a6;

color: white;

border: none;

height: 30px;

padding: 0px 20px;

}

.el-dialog__headerbtn .el-dialog__close {

color: #ffffff;

}

.well {

display: block;

background-color: #f2f2f2;

border: 1px solid #ccc;

margin: 0px;

width: 100%;

height: 100%;

overflow: auto;

}

.el-image {

height: 100%;

width: 100%;

overflow: hidden;

position: relative;

.el-image__inner {

max-width: 100%;

max-height: 100%;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: auto;

height: auto;

padding: 20px;

}

}

.wraper {

background: rgba(0, 0, 0, 0.5);

height: 100%;

.el-carousel__container {

height: calc(100% - 28px);

}

.el-carousel__arrow {

background: @primary-color;

}

}

}

</style>

LKnology

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
附件图片pdf在线预览

import imageViewerVue from 'element-ui/packages/image/src/image-viewer.vue'//预览组件。const idNum = id.replace(/[^0-9]/gi, '') // 提取id中的数字，即行号。that.$message.error({ title: '失败', message: '接口请求失败' })// Vue.prototype['$message'].warning('文件下载失败')
复制链接

扫一扫