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的操作”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！