Click chọn:
- Mở editor lacvietoffice ở tab trình duyệt mới
https://trogiupluat.vn/uploads/files/Phu_luc_I-2.docx- Mở editor lacvietoffice như là đường dẫn gắn vào IFrame
Lưu ý: Tạo modal để chứa iframe
https://trogiupluat.vn/uploads/files/Phu_luc_I-2.docx
// Tạo modal chứa iframe
<div class="modal fade iframe-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="max-width: 95% !important">
<div class="modal-content iframe-modal-container border-0">
<div class="modal-header py-0 d-flex">
<p class="modal-title p-2">Tài liệup>
<a href="#" class="mr-auto p-2 iframe-modal__file-origin">Tải tệp tin gốc (nếu dữ liệu hiển trị không chính xác)a>
<button type="button" class="p-2 border-0 bg-transparent">
<span aria-hidden="true">×span>
button>
div>
<iframe id="iframe-office" src="" style="width:100%; min-height:85vh; border:0">iframe>
div>
div>
div>
// Ví dụ thẻ tag a chứa link file
<a href="http://trogiupluat.vn/uploads/files/Phu_luc_I-2.docx"> Phu_lucI.docx </a>
// Thêm đường dẫn script bên dưới vào trong thẻ body
<script src="https://office.trogiupluat.vn/assets/js/lv.office.js"></script>
<script>
// Demo 1 mở ở tab mới
$("a").click(function (e) {
e.preventDefault();
// Tùy chọn cấu hình
let options = {
url: $(this).attr('href'),
isEdit: true, // true : được quyền sửa false: chỉ được xem
showInfoBar: true, // true : hiển thị headerInfo false: ẩn headerInfo
headerInfo: 'LạcViệt Office',
isIframe: false, // true: Mở editor lacvietoffice như là IFrame false: Mở editor lacvietoffice ở tab mới
}
// Gọi function lvOfficeEditor để lấy trình soạn thảo
$(this).lvOfficeEditor(options, (editor) => {
// trả về đường dẫn trình soạn thảo, có thể dùng để nhúng vào iframe hiển thị ở ứng dụng của bạn...
console.log(editor);
});
})
// Demo 2 trả về url nhúng Iframe
$("a").click(function (e) {
e.preventDefault();
let options = {
url: $(this).attr('href'),
isEdit: true,
isIframe: true,
modalCloseTarget: '#btnCloseIframeModal',
modal:'.iframe-modal'
}
$(this).lvOfficeEditor(options, (editor) => {
console.log(editor);
$("#iframe-office").attr("src", editor.editorUrl);
$(".iframe-modal").modal({
backdrop: 'static',
show: true
});
$("#modal-office__open-new-tab").attr("href", editor.editorNewTab);
$(".modal-title").html(options.url.split('/').pop());
$(".iframe-modal__file-origin").attr('href', options.url); // xem file gốc
}, (exportFile) => getFileExport(exportFile)); // trả về file lưu
})
// Demo 3 Tạo trình soạn thảo mới
$("#btnOpenNewTab").click(function (e) {
e.preventDefault();
let options = {
fileName: 'test', // Tên file
extension:'.docx', // extension docx hoặc xlsx nếu excel
isEdit: true,
isIframe: true,
modalCloseTarget: '#btnCloseIframeModal',
modal:'.iframe-modal'
}
// Loại bỏ các ký tự không cho phép khi đặt tên tệp tin .\/:*?"<>|
//options.fileName = options.fileName.replace(/[.|\|/|:|*|?|"|<|>|||]/gi, '');
$(".modal-title").html(options.fileName + options.extension);
var office = new lvOffice.editor(options);
office.create((editor) => {
console.log(editor);
$("#iframe-office").attr("src", editor.editorUrl);
$(".iframe-modal").modal({
backdrop: 'static',
show: true
});
$("#modal-office__open-new-tab").attr("href", editor.editorNewTab);
}, (exportFile) => getFileExport(exportFile)); // trả về file lưu
})
// Nhận đường dẫn file export trả về
// Luu y: chỉ nhận được file export trả về khi options.isIframe là true
function getFileExport(exportFile) {
console.log(exportFile)
}
</script>