vue2.0纯前端预览附件方法汇总

2024-08-26 17:04

本文主要是介绍vue2.0纯前端预览附件方法汇总,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue2.0纯前端预览附件方法汇总

  • 一、使用iframe预览
    • 1.使用 Office 在线查看器
    • 2.XDOC文档预览服务
      • XDOC官网地址:[https://view.xdocin.com/](https://view.xdocin.com/)
  • 二、vue-office
      • 具体效果可以参考: [https://501351981.github.io/vue-office/examples/dist/#/docx](https://501351981.github.io/vue-office/examples/dist/#/docx)
    • 1.docx预览
    • 2.excel文档预览
    • 3.pdf文档预览
      • 具体代码可以参考: [https://gitee.com/ye-jizeng/vue-office#https://gitee.com/link?target=https%3A%2F%2F501351981.github.io%2Fvue-office%2Fexamples%2Fdist%2F](https://gitee.com/ye-jizeng/vue-office#https://gitee.com/link?target=https%3A%2F%2F501351981.github.io%2Fvue-office%2Fexamples%2Fdist%2F)
  • 三、file-viewer插件(封装好的预览组件)
    • 1.通过上传获取文件arrayBuffer
      • 具体效果可以参考: [https://zhuye1993.github.io/file-view/dist/index.html](https://zhuye1993.github.io/file-view/dist/index.html)
      • 代码地址: [https://github.com/zhuye1993/file-view](https://github.com/zhuye1993/file-view)
    • 2.通过上传获取文件arrayBuffer和Url方式(都转换成html 和css方式)
      • 具体效果可以参考: [https://viewer.flyfish.group/](https://viewer.flyfish.group/)
      • 代码地址:[https://git.flyfish.dev/flyfish-group/file-viewer-demo](https://git.flyfish.dev/flyfish-group/file-viewer-demo)
  • 四、vue-pdf插件
    • 1.全文预览
    • 2.指定页数,直接预览到某页的
  • 五、pptx.js插件

一、使用iframe预览

1.使用 Office 在线查看器

支持 Word 和 Excel 和Pdf 文档预览,兼容性好。不需要额外安装库,直接使用在线服务。 文件地址必须公网

<iframe :src="textVisibleURl" frameborder="0" width="700" height="800"></iframe>// 打开文件预览
clickPreview(pitem) {if (/\.pdf$/i.test(pitem.name)) {this.textVisibleURl = pitem.url;} else if (/\.(doc|docx|xls|xlsx|ppt|pptx|pdf)$/i.test(pitem.name)) {let src = pitem.url;//这个地址预览的时候有一些按钮// this.textVisibleURl = `https://view.officeapps.live.com/op/view.aspx?src=${src}`;this.textVisibleURl = `https://view.officeapps.live.com/op/embed.aspx?src=${src}`;} else if (/\.csv$/i.test(pitem.name)) {this.textVisibleURl = `http://view.xdocin.com/xdoc?_xdoc=${pitem.url}`;}
},

2.XDOC文档预览服务

调用方法:https://view.xdocin.com/view?src=你的文档地址

<iframeclass="iframeDom":src="textVisibleURl"frameborder="0"width="100%"height="800"></iframe>clickPreview(){var xurl = 'https://view.xdocin.com/view?src=';xurl += encodeURIComponent(newV);let ops = {pdf: true,// toolbar: false,// limit: '2,1', //只显示第二页// limit: '2', //显示一二页limit: '5,4', //显示一二页// limit: '2,3', //显示二三四页};for (var a in ops) {xurl += '&' + a + '=' + encodeURIComponent(ops[a]);}this.textVisibleURl = xurl;
}

XDOC官网地址:https://view.xdocin.com/

二、vue-office

支持多种文件(.docx、.pdf、.excel)预览的vue组件套装,支持vue2/3。
只需提供文档的src(网络地址)即可完成文档预览
(其中word是转换成html 和css,可以对文档内容进行高亮定位什么的)

有文档网络地址,比如 https://***.docx
文件上传时预览,此时可以获取文件的ArrayBuffer或Blob

具体效果可以参考: https://501351981.github.io/vue-office/examples/dist/#/docx

//docx文档预览组件
npm install @vue-office/docx vue-demi//excel文档预览组件
npm install @vue-office/excel vue-demi//pdf文档预览组件
npm install @vue-office/pdf vue-demi

1.docx预览

// 使用网络地址
<template><vue-office-docx :src="docx" @rendered="rendered"/>
</template><script>
//1.引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>//********************************************************************************************
//2.element的上传组件,获取文件的arrayBuffer
<template><div id="docx-demo"><el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action=""><el-button size="small" type="warning">点击上传</el-button></el-upload><vue-office-docx :src="src" /></div>
</template><script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {components: {VueOfficeDocx},data(){return {src:'',fileList:[]}},methods:{beforeUpload(file){let reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = (loadEvent) => {let arrayBuffer = loadEvent.target.result;this.src = arrayBuffer};return false}}
}
</script>//********************************************************************************************
//3.原生的input type="file"
<template><div><input type="file" @change="changeHandle"/><vue-office-docx :src="src"/></div>
</template><script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data(){return {src: ''}},methods:{changeHandle(event){let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload =  () => {this.src = fileReader.result}}}
}
</script>

2.excel文档预览

<template><vue-office-excel :src="excel" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

3.pdf文档预览

<template><vue-office-pdf :src="pdf" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

具体代码可以参考: https://gitee.com/ye-jizeng/vue-office#https://gitee.com/link?target=https%3A%2F%2F501351981.github.io%2Fvue-office%2Fexamples%2Fdist%2F

三、file-viewer插件(封装好的预览组件)

1.通过上传获取文件arrayBuffer

具体效果可以参考: https://zhuye1993.github.io/file-view/dist/index.html

代码地址: https://github.com/zhuye1993/file-view

参考文章链接: https://juejin.cn/post/7071598747519549454

// 主要代码
<template><div :class="{ hidden }"><div class="banner"><div class="container"><h1><div>在线文档查看<input class="file-select" type="file" @change="handleChange" /></div></h1></div></div><div class="container"><div v-show="loading" class="well loading">正在加载中,请耐心等待...</div><div v-show="!loading" class="well" ref="output"></div></div></div>
</template><script>
import { getExtend, readBuffer, render } from "@/components/util";
import { parse } from "qs";/*** 支持嵌入式显示,基于postMessage支持跨域* 示例代码:**/
export default {name: "HelloWorld",props: {msg: String,},data() {return {// 加载状态跟踪loading: false,// 上个渲染实例last: null,// 隐藏头部,当基于消息机制渲染,将隐藏hidden: false,};},created() {// 允许使用预留的消息机制发送二进制数据,必须在url后添加?name=xxx.xxx&from=xxxconst { from, name } = parse(location.search.substr(1));if (from) {window.addEventListener("message", (event) => {const { origin, data: blob } = event;if (origin === from && blob instanceof Blob) {// 构造响应,自动渲染const file = new File([blob], name, {});this.hidden = true;this.handleChange({ target: { files: [file] } });}});}},methods: {async handleChange(e) {this.loading = true;try {const [file] = e.target.files;const arrayBuffer = await readBuffer(file);this.loading = false;this.last = await this.displayResult(arrayBuffer, file);} catch (e) {console.error(e);} finally {this.loading = false;}},displayResult(buffer, file) {// 取得文件名const { name } = file;// 取得扩展名const extend = getExtend(name);// 输出目的地const { output } = this.$refs;// 生成新的domconst node = document.createElement("div");// 添加孩子,防止vue实例替换dom元素if (this.last) {output.removeChild(this.last.$el);this.last.$destroy();}const child = output.appendChild(node);// 调用渲染方法进行渲染return new Promise((resolve, reject) =>render(buffer, extend, child).then(resolve).catch(reject));},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner {overflow: auto;text-align: center;/* background-color: #12b6ff; */color: #000;
}.hidden .banner {display: none;
}.hidden .well {height: calc(100vh - 12px);
}.file-select {position: absolute;left: 5%;top: 17px;margin-left: 20px;
}.banner div {color: #000;
}.banner h1 {font-size: 20px;line-height: 2;margin: 0.5em 0;
}.well {display: block;background-color: #f2f2f2;border: 1px solid #ccc;margin: 5px;width: calc(100% - 12px);height: calc(100vh - 73px);overflow: auto;
}.loading {text-align: center;padding-top: 50px;
}.messages .warning {color: #cc6600;
}
</style><style>
.pptx-wrapper {max-width: 1000px;margin: 0 auto;
}
</style>

2.通过上传获取文件arrayBuffer和Url方式(都转换成html 和css方式)

具体效果可以参考: https://viewer.flyfish.group/

代码地址:https://git.flyfish.dev/flyfish-group/file-viewer-demo

如果要获取最新的源码,要找人家开放私库权限(文章链接里面有)

参考文章链接: https://blog.csdn.net/wybaby168/article/details/122842866?spm=1001.2014.3001.5502

 //对应解析的插件
word预览是用的docxjs
pdf预览是用的pdfjs
ppt预览是用的pptx2html
// 主要代码
<template><div class="file-viewer"><div class="name">{{filename}}</div><div v-if="error" class="content loading">{{error}}</div><template v-else><div v-show="loading" class="content loading">{{message}}</div><div v-show="!loading" class="content" ref="output"></div></template></div>
</template><script>
import { getExtend, render } from "./util";
import axios from "axios";
import { readBuffer } from "../../common/util";const messages = {loading: '正在加载中,请耐心等待...',reading: '正在努力解析文件...',errorLoading: e => `加载文件异常:${e}`,errorReading: e => `读取文件异常:${e}`,
}export default {name: "FileViewer",props: {file: {type: [File, Blob, ArrayBuffer],description: '通过文件对象或二进制数据加载文档'},url: {type: String,description: '通过url加载文档'}},data() {return {// 加载状态跟踪loading: false,// 存在错误时有值error: '',// 消息message: '',// 文件名filename: '',}},watch: {// url改变时,重新请求url() {this.loadFromUrl();},file(file) {this.resolveFile(file);},},mounted() {if (this.file) {this.resolveFile(this.file);}this.loadFromUrl();},methods: {// 从url加载async loadFromUrl() {// 要预览的文件地址const { url } = this;if (!url) return;this.startLoading(messages.loading)const filename = url.substr(url.lastIndexOf('/') + 1);// 拼接ajax请求文件内容try {const { data } =  await axios({ url, method: 'get', responseType: 'blob' });// 展示错误if (!data) return this.showError('文件下载失败');// 手动构建一个fileconst file = this.wrap(data, filename);// 解析文件return this.resolveFile(file);} catch (e) {this.showError(messages.errorLoading(e));} finally {this.endLoading();}},// 包装filewrap(data, filename) {if (data instanceof File) {return data;}if (data instanceof Blob) {return new File([ data ], filename, {});}if (data instanceof ArrayBuffer) {return this.wrap(new Blob([ data ]));}},// 处理并解析文件async resolveFile(data) {// 停止之前的加载if (this.loading) this.endLoading();// 安全的包装文件const file = this.wrap(data);// 开始加载this.startLoading(messages.reading);try {this.filename = file.name && decodeURIComponent(file.name) || '';const arrayBuffer = await readBuffer(file);this.last = await this.displayResult(arrayBuffer, file)} catch (e) {this.showError(messages.errorReading(e));} finally {this.endLoading();}},// 展示渲染最终效果displayResult(buffer, file) {// 取得文件名const { name } = file;// 取得扩展名const extend = getExtend(name);// 输出目的地const { output } = this.$refs;// 生成新的domconst node = document.createElement('div');// 添加孩子,防止vue实例替换dom元素if (this.last) {output.removeChild(output.lastChild);this.last.$destroy();}const child = output.appendChild(node);// 调用渲染方法进行渲染return new Promise((resolve, reject) => render(buffer, extend, child).then(resolve).catch(reject));},showError(message) {this.error = message;},startLoading(message) {this.loading = true;this.message = message;this.error = '';},endLoading() {this.loading = false;this.message = '';}}
}
</script><style scoped>
.file-viewer {position: relative;
}
.content {display: block;background-color: #f2f2f2;border: 1px solid #ccc;margin: 5px;width: calc(100% - 12px);height: calc(100vh - 73px);overflow: auto;
}.loading {text-align: center;padding-top: 50px;
}.name {position: absolute;bottom: 0;left: 0;width: 100%;padding: 13px 0;font-size: 20px;text-shadow: 2px 2px #616161;pointer-events: none;color: white;background: rgba(31, 31, 31, 0.22);text-align: center;z-index: 10000;
}
</style>

四、vue-pdf插件

arrayBuffer和Url方式都支持

npm install --save vue-pdf
import pdf from 'vue-pdf'

1.全文预览

<template><div><pdfv-for="i in numPages":key="i":page="i":src="pdfUrl"style="width: 100%"@num-pages="pageCount = $event"></pdf></div>
</template><script>
import pdf from 'vue-pdf';export default {name: 'PDF',components: { pdf },data() {return {pageCount: 10, //当前页pdfUrl: '',src: 'https://.pdf', // pdf文件地址numPages: 0, //总页数};},mounted() {this.loadPdfHandler();},methods: {async loadPdfHandler() {this.pdfUrl = pdf.createLoadingTask(this.src);this.pdfUrl.promise.then(pdf => {this.numPages = pdf.numPages;});},},
};
</script>

2.指定页数,直接预览到某页的

<template><div class="pdf-preview-out" v-loading="boxLoading"><!-- 上部 外层容器 用于滚动--><div class="scroll-box"><!-- 用于截取调缩放后的空白区域 --><div class="pdf-box"><!-- pdf预览区域(会被缩放) --><div :style="getPdfSize()" class="pdf-scale-box"><!-- 预览组件 --><pdf:src="url":page="currentPage"@num-pages="getTotalPage"@page-loaded="pageLoaded"@loaded="mountedLoaded"></pdf></div></div></div><!-- 底部操作栏 --><div class="bottom-tools"><div>{{ pageTotal }}</div><div class="page"><el-button round type="primary" :disabled="currentPage === 1" @click="chengPage">上一页</el-button><!-- 页码展示及跳转 --><el-buttonroundtype="primary":disabled="currentPage === pageTotal"@click="chengPage('+')">下一页</el-button></div><div class="scale"><el-buttontype="primary"icon="el-icon-minus"circle:disabled="pageScale - 0.1 < 0.3"@click="scalePage"></el-button><el-buttontype="primary"icon="el-icon-plus"circle:disabled="pageScale + 0.1 > 1"@click="scalePage('+')"></el-button></div></div></div>
</template>
<script>
// 插件引入
import pdf from 'vue-pdf';
export default {components: {pdf,},data() {return {// 总页数pageTotal: 0,// 当前页currentPage: 3,// 缩放比例pageScale: 0.8,// 遮罩boxLoading: true,pageChangeTimer: null,url: 'https://.pdf',};},methods: {// 获取到pdf总页数时触发 会传入总页数getTotalPage(page) {this.pageTotal = page;},// 初始化加载完毕触发mountedLoaded() {// 去除遮罩this.boxLoading = false;},// 每加载完成一页时触发(初始化/翻页时均会触发)pageLoaded() {// 重新设置pdf预览区域容器外容器的尺寸this.setPdfBoxSize();},// 设置pdf预览区域容器的缩放尺寸getPdfSize() {return {transform: `scale(${this.pageScale})`,};},// 点击缩放时触发scalePage(type) {// 改变缩放比例let sacle = 0;if (type === '+') {sacle = this.pageScale + 0.1;} else {sacle = this.pageScale - 0.1;}// 可能会涉及js的精度损失 保留一位小数即可this.pageScale = Number(sacle.toFixed(1));// 缩放后pdf预览区域容器中会有留白 重新设置pdf预览区域容器外容器的尺寸this.setPdfBoxSize();},// 方法 翻页chengPage(type) {// 防抖 0.5秒内不再次触发时执行if (this.pageChangeTimer) {clearTimeout(this.pageChangeTimer);}// 执行翻页this.pageChangeTimer = setTimeout(() => {if (type === '+') {this.currentPage += 1;} else {this.currentPage -= 1;}// 翻页后将滚动条归位到顶部this.scrollbarReset();this.pageChangeTimer = null;}, 500);},// 方法 滚动条归位到顶部scrollbarReset() {let boxDom = document.querySelector('.scroll-box');boxDom.scrollTop = 0;},// 方法 设置pdf预览区域容器外容器的尺寸setPdfBoxSize() {// 缩放后 pdf的显示上会缩小 但元素的实际占地尺寸不会变化(仍是原尺寸) 导致可能会出现部分区域留白 通过改变pdf预览区域容器外容器的尺寸 来将留白区域hidden// 获取pdf的原尺寸let boxDom = document.querySelector('.pdf-scale-box');// 获取要设置尺寸的元素domlet setDom = document.querySelector('.pdf-box');// 如有缩放 高度根据缩放比例变化(48px是预留的上下外边距)if (this.pageScale !== 1 && boxDom && setDom) {setDom.style.height = `${boxDom.clientHeight * this.pageScale + 48}px`;} else {setDom.style.height = '';}// console.log(this.pageScale)// console.log(boxDom.clientWidth *  this.pageScale)},},
};
</script>
<style lang="scss" scoped>
.pdf-preview-out {// 高度为占满父组件中的外层容器(若不需要在父组件中设置高度 也可以在本组件中直接设置为所需值)height: 100%;// border: 1px solid #909;&,div {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}// 滚动容器.scroll-box {// 高度按比例 溢出滚动height: 800px;overflow: auto;border: 2px solid #c0d8f3;border-bottom: none;border-radius: 6px;background-color: #eeeeee;// 滚动条样式&::-webkit-scrollbar {width: 10px;}&::-webkit-scrollbar-thumb {background-color: #c0d8f3;border-radius: 6px;}&::-webkit-scrollbar-track {background-color: transparent;border-radius: 6px;}// 用于缩放后截取掉不需要的空白的容器.pdf-box {overflow: hidden;padding: 24px;// border: 1px solid rgb(165, 11, 236);}// pdf预览区容器.pdf-scale-box {box-shadow: 0px 0px 20px 5px #666565;// border: 2px solid #090;// 设置缩放的中心点transform-origin: center top;transition: 0.2s;}}.bottom-tools {height: 50px;line-height: 50px;background-color: #c0d8f3;border: 1px solid #5caaf8;border-radius: 6px;display: flex;padding: 0px 24px;.page {color: #636a70;flex-grow: 1;// border: 1px solid #909;span {margin-right: 20px;}}.scale {// border: 1px solid #909;text-align: right;}}
}
</style>

链接: https://blog.csdn.net/m0_71537867/article/details/131614868

五、pptx.js插件

另外预览ppt还有一个插件pptx但是我没试,放两个链接,你们可以自己试试
链接: https://www.cnblogs.com/xyulz/p/17812301.html
链接: https://blog.51cto.com/u_16213605/8386577

重要写完了~~~~~心累
在这里插入图片描述

这篇关于vue2.0纯前端预览附件方法汇总的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109161

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

浅谈主机加固,六种有效的主机加固方法

在数字化时代,数据的价值不言而喻,但随之而来的安全威胁也日益严峻。从勒索病毒到内部泄露,企业的数据安全面临着前所未有的挑战。为了应对这些挑战,一种全新的主机加固解决方案应运而生。 MCK主机加固解决方案,采用先进的安全容器中间件技术,构建起一套内核级的纵深立体防护体系。这一体系突破了传统安全防护的局限,即使在管理员权限被恶意利用的情况下,也能确保服务器的安全稳定运行。 普适主机加固措施:

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能