对应的样式

<style >

.qualityManual-container-office {

width: 100%; /* 确保容器宽度充满整个父元素 */

height: 800px; /* 根据需要调整高度 */

overflow: hidden; /* 避免内部内容溢出 */

}

</style>

3.对应的后端代码

1.dowload 方法是作为流进行文件数据的返回

2.save方法是对在线编辑后对于word的保存回调方法，在vue中有对应url回调地址的设置选项

注意：回调的时候，onlyOffice是通过一个地址（url）让你进行去下载。

有一些是测试时的代码，没有删掉，请大家注意甄别。

@GetMapping("/download/{id}")

public void download(@PathVariable("id")Long id, HttpServletRequest request, HttpServletResponse response) throws Exception {

Notemodeltypeenum notemodeltypeenum = notemodeltypeenumService.selectNotemodeltypeenumByID(id);

String filePath = "/a.docx";

int profileIndex = notemodeltypeenum.getContentStr().indexOf("/profile") + "/profile".length();

String subPath = notemodeltypeenum.getContentStr().substring(profileIndex);

filePath = RuoYiConfig.getProfile()+subPath;

//本地文件

// String configPath = RuoYiConfig.getAttachPath();

// filePath = configPath + attachment.getVirtualpath();

File file = new File(filePath);

if (file.exists()) {

// String filename = attachment.getFilename();

response.setContentType("application/octet-stream");

response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("a.docx", "utf-8"));code>

response.setCharacterEncoding("utf-8");

response.setContentLength((int) file.length());

byte[] buff = new byte[(int) file.length()];

BufferedInputStream bufferedInputStream = null;

OutputStream outputStream = null;

try {

outputStream = response.getOutputStream();

bufferedInputStream = new BufferedInputStream(new FileInputStream(file));

int i = 0;

while ((i = bufferedInputStream.read(buff)) != -1) {

outputStream.write(buff, 0, i);

outputStream.flush();

}

} catch (IOException e) {

e.printStackTrace();

} finally {

try {

bufferedInputStream.close();

} catch (IOException e) {

e.printStackTrace();

}

}

}

}

@PostMapping("/save/{id}")

public void save(@PathVariable("id")Long id,@RequestParam Map<String, String> map, HttpServletRequest request, HttpServletResponse response) {

Notemodeltypeenum notemodeltypeenum = notemodeltypeenumService.selectNotemodeltypeenumByID(id);

PrintWriter writer = null;

String body = "";

try {

writer = response.getWriter();

Scanner scanner = new Scanner(request.getInputStream());

scanner.useDelimiter("\\A");

body = scanner.hasNext() ? scanner.next() : "";

scanner.close();

} catch (Exception ex) {

writer.write("get request.getInputStream error:" + ex.getMessage());

return;

}

if (body.isEmpty()) {

throw new GlobalException("ONLYOFFICE回调保存请求体未空");

}

JSONObject jsonObj = JSONObject.parseObject(body);

int status = (Integer) jsonObj.get("status");

int saved = 0;

String key = jsonObj.get("key").toString();

if (status == 2 || status == 3 || status == 6) //MustSave, Corrupted

{

String downloadUri = (String) jsonObj.get("url");

System.out.println(downloadUri);

try {

String fileName = generateUniqueFileName(extractFileName(notemodeltypeenum.getContentStr()));

String savePath = RuoYiConfig.getProfile()+"/"+fileName;

downloadFile(downloadUri,savePath);

// 更新原数据的文件地址

String s = replacePathAfterProfile(notemodeltypeenum.getContentStr(), "/" + fileName);

notemodeltypeenum.setContentStr(s);

notemodeltypeenumService.updateNotemodeltypeenum(notemodeltypeenum);

} catch (Exception ex) {

saved = 1;

ex.printStackTrace();

}

}

writer.write("{\"error\":" + saved + "}");

}

public static void downloadFile(String fileUrl, String saveDir) {

try {

URL url = new URL(fileUrl);

URLConnection connection = url.openConnection();

// 5000 milliseconds is an example timeout value

connection.setConnectTimeout(5000);

connection.setReadTimeout(5000);

try (BufferedInputStream in = new BufferedInputStream(connection.getInputStream());

FileOutputStream fileOutputStream = new FileOutputStream(saveDir)) {

byte[] dataBuffer = new byte[1024];

int bytesRead;

while ((bytesRead = in.read(dataBuffer, 0, 1024)) != -1) {

fileOutputStream.write(dataBuffer, 0, bytesRead);

}

}

System.out.println("File downloaded successfully: " + saveDir);

} catch (IOException e) {

System.out.println("Error downloading the file: " + e.getMessage());

e.printStackTrace();

}

}

//

// public static void main(String[] args) {

// downloadFile("https://dsgrcdnblobprod5u3.azureedge.net/catalog-assets/zh-cn/a32a147f-1f69-4fd5-8a39-c25b2a0093e8/tf67429532_wac-987650ec15fa.docx","D:/新建文件夹/87650ec15fa.docx");

// }

public static String generateUniqueFileName(String originalFilename) {

String fileExtension = ""; // 文件扩展名

int i = originalFilename.lastIndexOf('.');

if (i > 0) {

fileExtension = originalFilename.substring(i);

}

return UUID.randomUUID().toString() + fileExtension; // 生成带有扩展名的唯一文件名

}

public static String extractFileName(String url) {

// 检查url是否为空

if (url == null || url.isEmpty()) {

return "";

}

// 查找最后一个斜杠的位置

int lastIndex = url.lastIndexOf('/');

if (lastIndex == -1) {

return ""; // 如果没有找到斜杠，返回空字符串

}

// 从最后一个斜杠之后的位置开始提取子字符串

return url.substring(lastIndex + 1);

}

public static String replacePathAfterProfile(String url, String newPath) {

if (url == null || url.isEmpty()) {

return url; // 或抛出异常，取决于你的错误处理策略

}

// 找到"profile"后的第一个斜杠的索引

int profileIndex = url.indexOf("/profile");

if (profileIndex == -1) {

return url; // 如果找不到"profile"，返回原始URL

}

// 计算"profile"之后的部分开始的索引

int startReplaceIndex = profileIndex + "/profile".length();

// 构造新的URL

return url.substring(0, startReplaceIndex) + newPath;

}