Hướng dẫn display base64 image in excel using javascript - hiển thị hình ảnh base64 trong excel bằng javascript

Question

Excel dường như không thích hình ảnh được mã hóa base64 ...

Nội dung chính Show

Tải một hình ảnh cục bộ vào bàn của bạn
Mã nguồn
Nhúng hình ảnh từ xa vào bàn của bạn
Mã nguồn

Hãy thử chỉ cần thực hiện yêu cầu POST AJAX cho máy chủ của bạn với dữ liệu được mã hóa PNG Base64 của hình ảnh hiện đang bị lỗi, vào một dịch vụ lưu trữ hình ảnh và cung cấp lưu trữ cho chúng, một số mã PHP ví dụ (tôi giả sử bạn có quyền truy cập vào máy chủ Linux có thể chạy PHP):

<?php
$somecode = unique_name(); //left as excersise for the reader.

move_uploaded_file($_FILES["filename"]["tmp_name"],"destination_$somecode.png");
//also, check for errors.
echo $somecode;

Sau đó, chỉ cần sử dụng phản hồi của máy chủ làm URL trong tệp Excel. Bằng cách đó, bạn có thể nhúng một liên kết đến một hình ảnh thay vì chính một hình ảnh.

Vì vậy, nội dung di động có thể tương tự như:

<td><img src='yourhost.com/your_image_location' /></td>

Các tệp excel nhỏ hơn sẽ làm cho mọi người hạnh phúc, nhưng bạn sẽ phải xem xét những thứ như các tệp sẽ sống ở đó trong bao lâu để xem xét bao gồm cả dữ liệu thực tế được sử dụng để tạo biểu mẫu, vì vậy người dùng Excel trong tương lai có thể xây dựng lại biểu đồ rẻ tiền nếu máy chủ hình ảnh Đi xuống, hoặc hình ảnh "hết hạn".

Tôi hi vọng cái này giúp được!

Các ví dụ sau đây cho thấy cách nhúng hình ảnh vào bảng tính của bạn.

1

Tải một hình ảnh cục bộ vào bàn của bạn

Tải hình ảnh từ máy cục bộ của bạn vào bảng tính JavaScript của bạn

Nhấp đúp vào ô hình ảnh để tải lên một hình ảnh mới.

Mã nguồn

<html>
<script src="https://bossanova.uk/jspreadsheet/v3/jexcel.js"></script>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [
    ['Yellow', 'data:image/jpeg;base64,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'],
];

jexcel(document.getElementById('spreadsheet1'), {
    data:data,
    minDimensions: [2,4],
    columns: [
        { type:'text', width:300, title:'Title' },
        { type:'image', width:120, title:'Cover' },

     ]
});
<script>

</script>
</html>

2

Nhúng hình ảnh từ xa vào bàn của bạn

Kết xuất hình ảnh tự động từ URL từ xa bằng phương thức UpdateTable

Mã nguồn

<html>
<script src="https://bossanova.uk/jspreadsheet/v3/jexcel.js"></script>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data2 = [
    ['https://marketplace.canva.com/MACcZp2p4po/2/0/thumbnail_large/canva-black-white-acoustic-album-cover-MACcZp2p4po.jpg', 'Paul Parker'],
    ['https://marketplace.canva.com/MACcY55adP4/1/0/thumbnail_large/canva-black-and-white-masculine-acoustic-modern-album-cover-MACcY55adP4.jpg', 'Mark Ellen']
];

jexcel(document.getElementById('spreadsheet2'), {
    data:data2,
    columns: [
        { type:'text', width:300, title:'Cover' },
        { type:'text', width:300, title:'Title' },
    ],
    updateTable: function (instance, cell, col, row, val, id) {
        if (col == 0) {
            cell.innerHTML = '<img src="' + val + '" style="width:100px;height:100px">';
        }
    }
});
<script>

</script>
</html>