溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS實(shí)現(xiàn)文件上傳與下載,PDF與Excel的操作

發(fā)布時(shí)間:2021-06-25 11:31:46 來(lái)源:億速云 閱讀:305 作者:chen 欄目:大數(shù)據(jù)

本篇內(nèi)容介紹了“JS實(shí)現(xiàn)文件上傳與下載,PDF與Excel的操作”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!

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">上傳到服務(wù)器</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過(guò)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 個(gè)文件`);
            },
            handleSuccess(res, file, fileList) {
                this.$message.success('文件上傳成功');
                this.fileList = [];
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`正在刪除上傳文件,是否繼續(xù)?`);
            }
        }
    })
</script>

在使用el-upload組件時(shí),會(huì)有頁(yè)面上渲染兩個(gè)上傳按鈕,可以使用CSS把原生的上傳按鈕隱藏起來(lái)

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認(rèn)證,可以不使用這個(gè)裝飾器
@check_upload_wrapper               # 裝飾器,檢查后臺(tái)是否有`upload/`目錄,如果沒(méi)有則創(chuàng)建
def upload_temp(request):
    file_obj = request.FILES.get('file')        # 獲取上傳的文件對(duì)象
    t = time.strftime('%Y%m%d%H%M%S')
    now_file_name = t + '.' + file_obj.name.split('.')[1]       # 得到文件在后臺(tái)的保存名字
    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)

# 創(chuàng)建一個(gè)pdf文檔,這個(gè)只是代表pdf文檔的值,并沒(méi)有創(chuàng)建實(shí)際的文檔。
pdf_writer = PyPDF2.PdfFileWriter()

# 將文檔一頁(yè)一頁(yè)的讀入到新的文檔
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方法才能真正生成一個(gè)文件
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'

    # 文件路徑的中文轉(zhuǎn)碼
    file_path = file_path.decode('utf-8')

    # 獲取數(shù)據(jù)
    data = xlrd.open_workbook(file_path)

    # 獲取sheet,通常為 Sheet1
    table = data.sheet_by_name(u'Sheet1)

    # 獲取excel文件的總行數(shù)
    nrows = table.nrows
    # 從第二行開(kāi)始讀取數(shù)據(jù)
    for i in range(1, nrows):
        # 讀取每一行第一列的數(shù)據(jù)
        value1 = table.cell(i, 0).value.strip()
        # 讀取每一行第二列的數(shù)據(jù)
        value2 = table.cell(i, 1).value.strip()

5.寫(xiě)入Excel文件

5.1 xlwt 模塊寫(xiě)入Excel文件

def write_excel(sheet_name, titles, col1, col2):
    f = xlwt.Workbook()
    # 添加一個(gè)Sheet,名字為 sheet_name 所傳的參數(shù)
    sheet1 = f.add_sheet(sheet_name, cell_overwrite_ok=True)
    # 寫(xiě)文件頭
    for i in range(0, len(titles)):
        # i 表示第一行的第 i 列
        sheet1.write(0, i, titles[i])

    # 從第二行開(kāi)始寫(xiě)入數(shù)據(jù)
    for i in range(0, len(col1)):
        # 向每一行的第1列寫(xiě)入數(shù)據(jù)
        sheet1.write(i + 1, 0, col1[i])
        # 向每一行的第2列寫(xiě)入數(shù)據(jù)
        sheet1.write(i + 1, 1, col2[i])

    # 第一個(gè)參數(shù)表示行,從0開(kāi)始計(jì)算
    # 第二個(gè)參數(shù)表示列,從0開(kāi)始計(jì)算
    # 第二個(gè)參數(shù)表示寫(xiě)入的數(shù)據(jù)
    # sheet1.write(1, 3, '2006/12/12')

    # 第一個(gè)參數(shù):合并開(kāi)始的行
    # 第二個(gè)參數(shù):合并結(jié)束的行(可以一次合并多行)
    # 第三個(gè)參數(shù):合并開(kāi)始的列
    # 第四個(gè)參數(shù):合并結(jié)束的列(可以一次合并多行多列)
    # 第五個(gè)參數(shù):寫(xiě)入的數(shù)據(jù)
    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 模塊寫(xiě)入Excel文件

def write_excel1():
    # 新建文件,文件名為: hello.xlsx
    workbook = xlsxwriter.Workbook('hello.xlsx')
    # 建立sheet,可以傳入?yún)?shù)來(lái)指定sheet名
    worksheet = workbook.add_worksheet(u"任平生")

    titles = [u"姓名", u"年齡", u"出生日期", u"愛(ài)好"]
    col1 = [u"張三", u"李四", u"戀習(xí)Python", u"小明", u"小紅", u"無(wú)名"]
    col2 = [12, 13, 14, 15, 16, 17]

    # 寫(xiě)入文件頭部
    for i in range(len(titles)):
        worksheet.write(0, i, titles[i])

    # 寫(xiě)入文件內(nèi)容
    for j in range(len(col1)):
        # 從第二行開(kāi)始向每行的第一列寫(xiě)入數(shù)據(jù)
        worksheet.write(j + 1, 0, col1[j])
        # 從第二行開(kāi)始向每行的第二列寫(xiě)入數(shù)據(jù)
        worksheet.write(j + 1, 1, col2[j])

    workbook.close()

“JS實(shí)現(xiàn)文件上傳與下載,PDF與Excel的操作”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI