JS实现文件上传与下载，PDF与Excel的操作

本篇内容介绍了“JS实现文件上传与下载，PDF与Excel的操作”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.文件上传

前端代码

<el-upload
    class="upload-demo"
    ref="upload"
    :action="actionUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button  size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

JS代码

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            fileList: [],
            actionUrl: site_url + "upload/"
            ...
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {

            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`一次只能上传 1 个文件`);
            },
            handleSuccess(res, file, fileList) {
                this.$message.success('文件上传成功');
                this.fileList = [];
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`正在删除上传文件，是否继续？`);
            }
        }
    })
</script>

在使用el-upload组件时，会有页面上渲染两个上传按钮，可以使用CSS把原生的上传按钮隐藏起来

input[type="file"] {
    display: none;
}

后端代码

import os
import time

from django.views.decorators.csrf import csrf_exempt

def check_upload_wrapper(func):
    def inner(*args, **kwargs):
        if not os.path.exists("upload/"):
            os.makedirs("upload/")
        return func(*args, **kwargs)
    return inner

@csrf_exempt                # 取消csrf认证，可以不使用这个装饰器
@check_upload_wrapper               # 装饰器，检查后台是否有`upload/`目录，如果没有则创建
def upload_temp(request):
    file_obj = request.FILES.get('file')        # 获取上传的文件对象
    t = time.strftime('%Y%m%d%H%M%S')
    now_file_name = t + '.' + file_obj.name.split('.')[1]       # 得到文件在后台的保存名字
    file_path = os.path.join('upload', now_file_name)
    with open(file_path, "wb") as f:
        for line in file_obj.chunks():
            f.write(line)
    return JsonResponse({'result': True, 'data': file_path})        # 必须要返回文件保存路径

2.文件下载

前端代码

<el-button type="primary" @click="download">下载</el-button>

<script type="text/javascript">
    new Vue({
        el: '#home',
        data: {

        },
        mounted() {
            this.init()
        },
        methods: {
            init() {

            },
            download() {
                location.href = site_url + 'download/'
            }
        }
    })
</script>

后端代码

from django.utils.encoding import escape_uri_path
from django.http import HttpResponse

def download(request):
    file_name = u"合并.pdf"
    file = open(file_name, 'rb')
    response = HttpResponse(file)
    response['Content-Type'] = 'application/octet-stream'
    response['Content-Disposition'] = "attachment;filename*=utf-8''{}".format(escape_uri_path(file_name))
    return response

3.PDF文件合并

pdffile1 = open(r'file1.pdf', 'rb')
pdffile2 = open(r'file2.pdf', 'rb')

pdf1_reader = PyPDF2.PdfFileReader(pdffile1)
pdf2_reader = PyPDF2.PdfFileReader(pdffile2)

# 创建一个pdf文档，这个只是代表pdf文档的值，并没有创建实际的文档。
pdf_writer = PyPDF2.PdfFileWriter()

# 将文档一页一页的读入到新的文档
for pagenum in range(pdf1_reader.numPages):
    pageobj = pdf1_reader.getPage(pagenum)
    pdf_writer.addPage(pageobj)

for pagenum in range(pdf2_reader.numPages):
    pageobj = pdf2_reader.getPage(pagenum)
    pdf_writer.addPage(pageobj)

# write方法才能真正生成一个文件
pdfoutputfile = open(u'合并.pdf', 'wb')
pdf_writer.write(pdfoutputfile)

pdfoutputfile.close()
pdffile1.close()
pdffile2.close()

4.读取Excel文件

# 读取Excel文件
def read_excel():
    # 路径前加 r，读取的文件路径
    file_path = r'file1.xlsx'

    # 文件路径的中文转码
    file_path = file_path.decode('utf-8')

    # 获取数据
    data = xlrd.open_workbook(file_path)

    # 获取sheet，通常为 Sheet1
    table = data.sheet_by_name(u'Sheet1)

    # 获取excel文件的总行数
    nrows = table.nrows
    # 从第二行开始读取数据
    for i in range(1, nrows):
        # 读取每一行第一列的数据
        value1 = table.cell(i, 0).value.strip()
        # 读取每一行第二列的数据
        value2 = table.cell(i, 1).value.strip()

5.写入Excel文件

5.1 xlwt 模块写入Excel文件

def write_excel(sheet_name, titles, col1, col2):
    f = xlwt.Workbook()
    # 添加一个Sheet，名字为 sheet_name 所传的参数
    sheet1 = f.add_sheet(sheet_name, cell_overwrite_ok=True)
    # 写文件头
    for i in range(0, len(titles)):
        # i 表示第一行的第 i 列
        sheet1.write(0, i, titles[i])

    # 从第二行开始写入数据
    for i in range(0, len(col1)):
        # 向每一行的第1列写入数据
        sheet1.write(i + 1, 0, col1[i])
        # 向每一行的第2列写入数据
        sheet1.write(i + 1, 1, col2[i])

    # 第一个参数表示行，从0开始计算
    # 第二个参数表示列，从0开始计算
    # 第二个参数表示写入的数据
    # sheet1.write(1, 3, '2006/12/12')

    # 第一个参数：合并开始的行
    # 第二个参数：合并结束的行(可以一次合并多行)
    # 第三个参数：合并开始的列
    # 第四个参数：合并结束的列(可以一次合并多行多列)
    # 第五个参数：写入的数据
    sheet1.write_merge(1, 3, 3, 3, u'打游戏')  # 合并列单元格
    sheet1.write_merge(4, 10, 3, 4, u'打篮球')
    f.save('%s.xls' % sheet_name)

5.2 xlsxwriter 模块写入Excel文件

def write_excel1():
    # 新建文件，文件名为: hello.xlsx
    workbook = xlsxwriter.Workbook('hello.xlsx')
    # 建立sheet，可以传入参数来指定sheet名
    worksheet = workbook.add_worksheet(u"任平生")

    titles = [u"姓名", u"年龄", u"出生日期", u"爱好"]
    col1 = [u"张三", u"李四", u"恋习Python", u"小明", u"小红", u"无名"]
    col2 = [12, 13, 14, 15, 16, 17]

    # 写入文件头部
    for i in range(len(titles)):
        worksheet.write(0, i, titles[i])

    # 写入文件内容
    for j in range(len(col1)):
        # 从第二行开始向每行的第一列写入数据
        worksheet.write(j + 1, 0, col1[j])
        # 从第二行开始向每行的第二列写入数据
        worksheet.write(j + 1, 1, col2[j])

    workbook.close()

“JS实现文件上传与下载，PDF与Excel的操作”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！