文章目录
一、文件预览功能的实现，包括 图片、pdf、word、excel的实现
二、总结
一、文件预览功能的实现，包括 图片、pdf、word、excel的实现
封装组件实现：目前可以实现的文件格式，包括图片，word支持docx, excel支持xlsx，还有pdf
< template>
< div class = "viewItemFile" >
< ! -- 预览文件 -- >
< el- dialog
width= "61%"
class = "viewItemFileDialog"
title= "预 览"
v- model= 'dialogVisible'
: before- close= "handleClose"
: close- on- click- modal= "false"
: close- on- press- escape= "false"
>
< div class = "image" v- if = "props.type == 'JPG' || props.type == 'jpg' || props.type == 'JPEG' || props.type == 'jpeg' || props.type == 'PNG' || props.type == 'png'" >
< div>
< img style= "display: block; max-width: 100%; margin: 0 auto" : src= "imgUrl" alt= "" / >
< / div>
< / div>
< div class = "docWrap" v- if = "props.type == 'docx'" >
< ! -- 预览文件的地方（用于渲染） -- >
< div ref= "file" > < / div>
< / div>
< div v- if = "props.type == 'xlsx'" >
< div class = "tab" >
< el- radio- group size= "small" v- model= "excel.sheetNameActive" @change= "getSheetNameTable" >
< el- radio- button v- for = "(item,index) in excel.sheetNames" : key= "index" : label= "item" > < / el- radio- button>
< / el- radio- group>
< / div>
< div
style= "margin-top: 5px;border: 1px solid #a0a0a0;overflow:auto;" >
< div v- html= "excel.SheetActiveTable" style= "padding: 10px 15px" > < / div>
< / div>
< / div>
< div v- if = "props.type == 'pdf'" >
< iframe
: src= "pdfurl"
type= "application/x-google-chrome-pdf"
width= "100%"
height= "1000px"
/ >
< / div>
< / el- dialog>
< / div>
< / template>
< script setup>
import { ref, nextTick, onMounted, getCurrentInstance, reactive, toRefs} from 'vue'
import * as docx from 'docx-preview'
import XLSX from 'xlsx'
import axios from 'axios' ;
const { proxy } = getCurrentInstance ( ) ;
const typeName = ref ( props. type) ;
const imgUrl = ref ( '' ) ;
const srcList = ref ( ) ;
const loading = ref ( false ) ;
const pdfurl = ref ( '' ) ;
const dialogVisible = ref ( props. showTime) ;
const emits = defineEmits ( ) ;
const emptyTips = ref ( '暂无内容' ) ;
const fullscreen = ref ( false ) ;
const data = reactive ( {
excel : {
workbook : { } ,
sheetNames : [ ] ,
sheetNameActive : "" ,
SheetActiveTable : ""
}
} )
const props = defineProps ( {
showTime : {
type : Boolean,
default : false
} ,
url : {
type : String,
default : ''
} ,
type : {
type : String,
default : 'image'
} ,
clientHeight : {
type : Number,
default : 600
}
} ) ;
const { excel} = toRefs ( data) ;
onMounted ( ( ) => {
console. log ( props. type, '++++' )
init ( props. type) ;
} )
function init ( type ) {
typeName. value = type;
if ( type == "JPG" || type == 'JPEG' || type == 'PNG' || type == 'jpg' || type == 'jpeg' ) {
axios. request ( {
method : "GET" ,
url : props. url,
responseType : "blob" ,
headers : {
Accept : "application/octet-stream" ,
} ,
} )
. then ( ( res ) => {
console. log ( res, 'image' ) ;
if ( res) {
let blob = new Blob ( [ res. data] , { type : "image/jpg" } ) ;
const imageUrl = URL . createObjectURL ( blob) ;
imgUrl. value = imageUrl;
srcList. value = [ imageUrl] ,
loading. value = true ;
} else {
loading. value = false ;
}
} )
. catch ( function ( error ) {
console. log ( error) ;
loading. value = false ;
} ) ;
} else if ( type == "pdf" ) {
axios. request ( {
method : "GET" ,
url : props. url,
responseType : "blob" ,
headers : {
"Content-Type" : "application/pdf;charset=UTF-8" ,
} ,
} )
. then ( ( res ) => {
console. log ( res) ;
if ( res) {
let blob = new Blob ( [ res. data] , { type : "application/pdf" } ) ;
const url = URL . createObjectURL ( blob) ;
console. log ( url) ;
loading. value = false ;
pdfurl. value = url;
} else {
loading. value = false ;
}
} )
. catch ( function ( error ) {
console. log ( error) ;
loading. value = false ;
} ) ;
} else if ( type == "xlsx" ) {
axios. request ( {
method : "GET" ,
url : props. url,
responseType : "arraybuffer" ,
headers : {
"Content-Type" :
"application/vnd.ms-excel;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ,
}
} ) . then ( ( res ) => {
console. log ( res, 'res' ) ;
if ( res) {
const workbook = XLSX . read ( new Uint8Array ( res. data) , {
type : "array" ,
} ) ;
const sheetNames = workbook. SheetNames
excel. value. workbook = workbook
excel. value. sheetNames = sheetNames
excel. value. sheetNameActive = sheetNames[ 0 ]
getSheetNameTable ( sheetNames[ 0 ] )
} else {
loading. value = false ;
}
} )
. catch ( function ( error ) {
console. log ( error) ;
loading. value = false ;
} ) ;
} else if ( type == "docx" ) {
axios. request ( {
method : "GET" ,
url : props. url,
responseType : "blob" ,
} )
. then ( ( res ) => {
console. log ( res) ;
if ( res) {
docx. renderAsync ( res. data, proxy. $refs. file) ;
} else {
loading. value = false ;
}
} )
. catch ( function ( error ) {
loading. value = false ;
} ) ;
}
dialogVisible. value = true ;
}
function getSheetNameTable ( sheetName ) {
try {
const worksheet = excel. value. workbook. Sheets[ sheetName]
let htmlData = XLSX . utils. sheet_to_html ( worksheet, { header : '' , footer : '' } )
htmlData = htmlData === '' ? htmlData : htmlData. replace ( / / , ')
htmlData = htmlData === '' ? htmlData : htmlData. replace ( / / , ')
excel. value. SheetActiveTable = htmlData
} catch ( e) {
excel. value. SheetActiveTable = '' + emptyTips. value + ''
}
}
function handleClose ( ) {
emits ( 'update' , false )
}
< / script>
< style lang= "scss" scoped>
. viewItemFile {
. image {
width : 100 % ;
height : 100 % ;
display : flex;
align- items: center;
justify- content: center;
div {
height : 600px;
width : 600px;
}
}
. divContent {
display : flex;
align- items: center;
justify- content: center;
}
v- deep . el- dialog {
margin : 0 ! important;
height : 100vh ! important;
. el- dialog__footer {
margin- bottom: 30px;
padding : 0px;
}
}
v- deep . el- dialog__body {
height : 96 % ;
width : 100 % ;
padding : 0 ;
overflow : auto;
}
}
. viewItemFile {
. file- pre {
height : calc ( 100vh - 40px) ;
padding : 20px;
. table- html- wrap v- deep table {
border- right: 1px solid #e8eaec;
border- bottom: 1px solid #e8eaec;
border- collapse: collapse;
margin : auto;
}
. table- html- wrap v- deep table td {
border- left: 1px solid #e8eaec;
border- top: 1px solid #e8eaec;
white- space: wrap;
text- align: left;
min- width: 100px;
padding : 4px;
}
table {
border- top: 1px solid #EBEEF5 ;
border- left: 1px solid #EBEEF5 ;
width : 100 % ;
overflow : auto;
tr {
height : 44px;
}
td {
min- width: 200px;
max- width: 400px;
padding : 4px 8px;
border- right: 1px solid #EBEEF5 ;
border- bottom: 1px solid #EBEEF5 ;
}
}
. el- tabs-- border- card {
}
. el- tabs-- border- card > . el- tabs__content {
overflow : auto;
height : calc ( 100vh - 110px) ;
}
}
v- deep table {
width : 100 % ! important;
border- collapse: collapse ! important;
border- spacing: 0 ! important;
text- align: center ! important;
border : 0px ! important;
overflow- x: auto ! important;
}
v- deep table tr td {
border- right: 1px solid gray ! important;
border- bottom: 1px solid gray ! important;
width : 300px ! important;
height : 33px ! important;
}
v- deep . excel- view- container {
background- color: #ffffff;
}
v- deep . class4Title {
font- size: 22px ! important;
font- weight: bold ! important;
padding : 10px ! important;
}
v- deep. class4TableTh {
font- weight: bold ! important;
padding : 2px ! important;
background- color: #ccc ! important;
}
}
html body {
width : 100 % ;
height : 100vh;
margin : 0 ;
}
< / style>
二、总结
总结：通过父组件传给子组件文件的后端地址url，组件通过文件类型来判断不同文件的接收类型，并且组件通过props.url来接收就可以了。
你可能感兴趣的:(vue3,pdf,word,excel)
如何使用Navicat连接Oracle数据库
Dawn·张
数据库 oracle
如果有人提供了如下数据库连接信息：数据库信息：UserId=mes_stsp;Password=******;DataSource=172.20.1.60:1521/ORCL这表示您需要连接到Oracle数据库。以下是通过Navicat连接Oracle数据库的步骤：1.打开Navicat，新建连接打开Navicat软件，在工具栏中点击“连接”。从下拉列表中选择“Oracle”。2.配置连接信息在弹
Axure RP从入门到精通（五十七） 灵魂提问 - 写PRD需求文档是使用Word文档还是Axure？
风流 少年
Axure RP 从入门到精通 axure
在实际工作中有些公司使用Word文档来写需求文档（一般是大公司），有些公司使用Axure来写需求文档，他们习惯在画原型的时候在旁边写需求，并用辅助线来连接需求说明和对应的功能（组件），那么我们应该如何选择使用方式？？？一：使用Word文档写需求文档的优劣势1.1优势方便存档，方便交接和传播（传递）；方便习惯使用Word文档的技术人员；方便发邮件做报告；还对于一些有较复杂流程，需要用到各种图示的产品
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格
宝码香车
# DeepSeek javascript 前端 vue.js ecmascript DeepSeek
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
使用pdfjs加载多页pdf并实现打印
MandiGao
vue 文件处理 pdf vue
版本：vue:2.7.10pdfjs-dist:2.14.305worker-loader:3.0.1安装pdfjs-dist、worker-loadernpminstallpdfjs-dist@
[email protected] 在vue.config.js中配置//webpack配置chainWebpack(config){
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格
宝码香车
# DeepSeek javascript 前端 vue.js ecmascript DeepSeek
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口s
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格
宝码香车
# DeepSeek javascript 前端 vue.js ecmascript DeepSeek deepSeek deepseek
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格页面效果组件代码代码测试测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例
宝码香车
# DeepSeek javascript 前端 vue.js ecmascript DeepSeek
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例页面效果组件代码测试代码正常跑通，附其他基本代码编写路由src\router\index.js编写展示入口src\App
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例3: 行选择
宝码香车
# DeepSeek vue.js javascript ecmascript 前端 DeepSeek
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue3开发：打造丝滑的表格（Table）示例3:行选择前言页面效果指令输入定义属性数据相关样式与布局相关功能相关定义事件其他think组件代码代码测试示例3，整理后主要代码定义组件\src\views\TableView
【NLP】 9. 处理创造性词汇 & 词组特征（Creative Words & Features Model）， 词袋模型处理未知词，模型得分
pen-ai
NLP 机器学习 自然语言处理 人工智能 深度学习
这里写目录标题处理创造性词汇&词组特征（CreativeWords&FeaturesModel）1.处理否定（NegationHandling）2.词组特征（Bigrams&N-grams）3.结合否定传播与n-grams进行优化词袋模型（Bag-of-Words,BoW）1.BoW示例2.处理未知词3.为什么忽略未知词？4.处理未知词的方法计算模型得分（ScoreCalculation）处理创造
图片上传保存问题
weixin_44145526
数据库
由于最近公司项目涉及到将xml内容显示在word表格中的业务需求，这就需要调用方将xml内容作为请求内容传递给生成接口。但在开发中发现没有得到预期效果，这是由于xml内容并未传入导致的，最后经过调查发现，当xml中写入多个图片，xml无法保存在数据库中。对于该问题需要考虑多个方面来解决：1、首先之所以未保存成功，是因为出现413错误请求体过大引起，最简单的方式就是增大请求上限，允许更大的请求体。如
ggplot2设置坐标轴范围_作图技巧018篇第二坐标轴在ggplot2中的实现
weixin_39618597
ggplot2设置坐标轴范围 R语言ggplot2移除图例 按键精灵定位坐标循环
“ggplot2中的次级坐标轴”生活科学哥-R语言科学2020-06-128：35在平时作图中，我们有时希望在一个坐标中进行二个坐标轴的设定，也是为了方便数据的显示。这个过程在EXCEL等当中比较容易实现，但是，如何在R中实现呢？今天我们就来讲一讲操作的过程。数据准备先准备如下数据：library(ggplot2)library(scales)library(magrittr)dfdata.fra
[学习笔记] Windows编程——GDI——（三）裁剪
根本没在怕哦
Windows 编程 学习 笔记 windows
前言：学习笔记，随时更新。如有谬误，欢迎指正。说明：红色字体为较为重要部分。绿色字体为个人理解部分。原文链接：https://learn.microsoft.com/en-us/windows/win32/gdi/clipping3裁剪剪裁是将输出限制为应用程序窗口的工作区中的某个区域或路径的过程。3.1关于裁剪应用程序通过多种方式使用剪裁。Word和Excel应用程序剪裁键盘输入，使其不显示在页
【NLP】 5. Word Analogy Task（词类比任务）与 Intrinsic Metric（内在度量）
pen-ai
NLP 机器学习 自然语言处理 word 人工智能
WordAnalogyTask（词类比任务）定义：WordAnalogyTask是用于评估词向量质量的内在指标（IntrinsicMetric）。该任务基于这样的假设：如果词向量能够捕捉单词之间的语义关系，那么这些关系应该能够在向量空间中保持一定的结构。示例：在一个理想的词向量空间中，单词之间的关系应该满足如下等式：king−man+woman≈queenking−man+woman≈queenk
VUE3中defineExpose的使用方法
云隙阳光i
vue.js javascript 前端
使用的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例，不会暴露任何在中声明的绑定。可以通过defineExpose编译器宏来显式指定在组件中要暴露出去的属性官网传送门在vue3的setup中，组件默认是关闭的，对一个子组件使用ref，不能获取任何在中声明的绑定。defineExpose是编译宏，用于显式地指定在组件中要暴露出去的属性。如下示例父组件import{ref
vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header
Beamon__
vue vue.js 前端
项目信息vue-cli创建的vue3+webpack5项目；问题现状配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；原因定位代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考Websocketconnectionfailed,Invalidframeheader·Issue#1850·vuejs/vue-cli·GitHub解决方案方案一一刀
Vue3项目基于Axios封装request请求
洛*璃
Vue.js vue.js 前端 javascript typescript
在Vue3的项目开发中，使用Axios进行HTTP请求是非常常见的作法，为了更方便开发者更高效的进行代码编写和项目的维护，可以通过再次封装Axios来实现。在本文中，博主将详细指导你如何在自己的Vue3项目中使用Axios二次封装request请求。1.安装Axios首先，确保我们的Vue3项目已经安装了Axios。如果尚未安装Axios，则可以定位到项目根目录下(与src目录同级)，运行命令行：
用Python提取json数据到Excel文件中
程序媛了了
python json excel
本文介绍基于Python，读取JSON文件数据，并将JSON文件中指定的键值对数据转换为.csv格式文件的方法。在之前的文章疯狂学习GIS：Python读取JSON数据并存储为CSV表格中，我们就介绍过将JSON文件数据保存到.csv格式或.xlsx格式的表格文件中的方法；而本文我们将针对不同的待提取数据特征，给出另一种方法。首先，我们来明确一下具体的需求。我们现有一个JSON文件数据，是一个包含
华为OD机试 - 代码编辑器（Java & JS & Python）
清水乐园
华为OD机考 java javascript 开发语言 华为
题目描述某公司为了更高效的编写代码，邀请你开发一款代码编辑器程序。程序的输入为已有的代码文本和指令序列，程序需输出编辑后的最终文本。指针初始位置位于文本的开头。支持的指令(X为大于等于0的整数,word为无空格的字符串)：FORWARDX指针向前(右)移动X,如果指针移动位置超过了文本末尾，则将指针移动到文本末尾BACKWARDX指针向后(左)移动X,如果指针移动位置超过了文本开头，则将指针移动到
后端开源库手册
Vic2334
JAVA 开源 java
Exceleasyexcel快速、简洁、解决大文件内存溢出的java处理Excel工具GitHub-alibaba/easyexcel:快速、简洁、解决大文件内存溢出的java处理Excel工具com.alibabaeasyexcel3.3.3POI老牌、内存占用稍大org.apache.poipoi3.17org.apache.poipoi-ooxml3.17BICBoard国内BI版本很多年不
JavaScript 中 Map 数据结构的使用
前端javascript
解释Map是一种js数据结构，与数组的map方法并非一种，要区分开来Map数据结构来管理数据，能提高代码的可读性Map相比较对象格式存储速度要更快Map数据结构//创建一个Map对象constformData=newMap();//添加表单元素的值到Map中formData.set('username','Tom');formData.set('password','123456');//获取表单
R语言高效数据处理-自定义EXCEL数据排版
LEEBELOVED
r语言 R语言高效处理数据 excel批处理
注：以下代码均为实际数据处理中的笔记摘录，所以很零散1、自定义excel表数据输出格式、布局在实际数据处理中为了提升效率，将Excel报表交付给需求方时减少手动调整的环节很有必要#1.1设置表头格式header_style=0', style=sheet_style)#数据写入writeData(data_deal_main01,'data_deal_test1',data_de
分享vue好用的pdf 工具实测
何包蛋H
vue.js pdf javascript
vue3-pdf-app：带大纲，带分页，带缩放，带全屏，带打印，带下载，带旋转下载依赖：yarnaddvue3-pdf-appornpminstallvue3-pdf-app配置类：创建文件pdfConfig.ts//工具栏配置项exportconstconfig={//右侧其他区工具sidebar:{viewThumbnail:true,//启用缩略图视图viewOutline:true,//
Matlab多种算法解决未来杯B的多分类问题
Subject.625Ruben
算法 分类 机器学习 数学建模 未来杯 matlab 人工智能
1.读取数据首先，我们从Excel文件中读取训练集和测试集：2.训练集划分我们将80%的数据用于训练，20%用于验证。3.训练多个模型我们选取8种常见分类模型，并存储预测结果。fori=1:length(modelNames)switchmodelNames{i}case'MultinomialLogisticRegression'B=mnrfit(X_train,Y_train,'model',
使用 Dify 创建自然语言生成 Word 文档的应用（详细指南）
engchina
LINUX python 人工智能 Agent Dify
使用Dify创建自然语言生成Word文档的应用（详细指南）一、开发核心API1.1API功能规划1.2环境准备安装依赖库项目目录结构1.3核心代码解析（`app.py`）1.3.1初始化配置1.3.2关键功能模块1.4API接口说明1.4.1转换接口`/convert`1.4.2下载接口`/download/`1.5启动服务1.6测试二、创建Dify工具2.1工作流设计步骤步骤1：创建新工作流步骤
go 加载yaml配置文件
zsd_666
后端 golang android 开发语言
go加载yaml配置文件config.yaml文件mysql:url:127.0.0.1userName:rootpassword:rootdbname:testport:3306准备结构体//用于接收yaml配置参数的struct结构体typeconfstruct{MysqlMysql`yaml:"mysql"`}typeMysqlstruct{Urlstring`yaml:"url"`User
useblackbox黑箱AI编码助理
百态老人
python 开发语言
黑箱AI是一个人工智能的编码助理可以让代码快10倍。它使您能够把任何问题变成代码和功能,如从任何视频提取代码和代码自动完成。它有以下几个特点：可以从视频、图片、PDF等格式中复制代码。可以将任何问题转换成代码。可以快速找到任何代码片段，并开始编码。支持20多种编程语言的代码自动补全。有Chrome扩展和VSCode扩展。这个网站有不同的收费方案，根据你需要的功能和使用量而定。它有以下几种选择：好开
Python——文件读取
一颗小松松
python 开发语言
Python可以读取不同格式的文件，下面简单来介绍一下：1、使用read_excel或read_csv读取文件，若在路径前加r，使用“\”importpandasaspd#在路径前加r,使用“\”df=pd.read_excel(r'C:\Users\merit\Desktop\测试.xlsx')#导入.csv文件，以“，”为分隔符data=pd.read_csv(r'C:\Users\merit
rapidocr-onnxruntime库及在open-webui上传PDF 图像处理 (使用 OCR)应用
原野AI
大模型部署 pdf ocr 深度学习 open-webui
背景rapidocr-onnxruntime是一个跨平台的OCR库，基于ONNXRuntime推理框架。目前已知运行速度最快、支持最广，完全开源免费并支持离线快速部署的多平台多语言OCR。缘起：百度paddle工程化不是太好，为了方便大家在各种端上进行ocr推理，我们将它转换为onnx格式，使用Python/C++/Java/Swift/C#将它移植到各个平台。名称来源：轻快好省并智能。基于深度学
RapidOCRPDF 项目教程
侯深业Dorian
RapidOCRPDF项目教程RapidOCRPDFBasedonRapidOCR,extractthePDFcontent.项目地址:https://gitcode.com/gh_mirrors/ra/RapidOCRPDF1.项目介绍RapidOCRPDF是一个基于RapidOCR的开源项目，旨在快速提取PDF文件中的文字内容。该项目支持多种类型的PDF，包括扫描版PDF、加密版PDF以及可直
Vue3使用ECharts入门示例
牧小七
Vue echarts 前端 javascript
ApacheECharts介绍一个基于JavaScript的开源可视化图表库。官方网址使用示例第一步：NPM安装EChartsnpminstallecharts--save第二步：使用EChartsimport*asechartsfrom'echarts';constmain=ref()consttu=()=>{//基于准备好的dom，初始化echarts实例varmyChart=echarts.
开发者关心的那些事
圣子足道
ios 游戏 编程 apple 支付
我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？
产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
负载均衡器技术Nginx和F5的优缺点对比
bijian1013
nginx F5
对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。
目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
LeetCode[Math] - #9 Palindrome Number
Cwind
java Algorithm 题解 LeetCode Math
原题链接：#9 Palindrome Number
要求：
判断一个整数是否是回文数，不要使用额外的存储空间
难度：简单
分析：
题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。
注：没有看到有关负数是否可以是回文数的明确结论，例如
画图板的基本实现
15700786134
画图板
要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。
首先，需要显示一个JFrame界面：
public class DrameFrame extends JFrame { //显示
linux的ps命令
被触发
linux
Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。
要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
Android 音乐播放器 下一曲 连续跳几首歌
肆无忌惮_
android
最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调
player.setOnCompletionListener(new OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mp) {
mp.reset();
Log.i("H
java导出txt文件的例子
知了ing
java servlet
代码很简单就一个servlet,如下：
package com.eastcom.servlet;
import java.io.BufferedOutputStream;
import java.io.IOException;
import java.net.URLEncoder;
import java.sql.Connection;
import java.sql.Resu
Scala stack试玩, 提高第三方依赖下载速度
矮蛋蛋
scala sbt
原文地址：
http://segmentfault.com/a/1190000002894524
sbt下载速度实在是惨不忍睹, 需要做些配置优化
下载typesafe离线包, 保存为ivy本地库
wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip
解压r
phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。
alleni123
linux spider
1. 首先从官网
http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。
2. 安装依赖
sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6
3. 配置环境变量
vi /etc/profil
JAVA IO FileInputStream和FileOutputStream，字节流的打包输出
百合不是茶
java核心思想 JAVA IO操作 字节流
在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流
1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流
类 FileInputStream
Spring基础实例（依赖注入和控制反转）
bijian1013
spring
前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口
package com.bijian.spring.base3;
public interface Weapon {
void kil
HR看重的十大技能
bijian1013
提升 能力 HR 成长
一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 一、解决问题的能力 每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
【Thrift一】Thrift编译安装
bit1129
thrift
什么是Thrift
The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
【Avro三】Hadoop MapReduce读写Avro文件
bit1129
mapreduce
Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。
这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
nginx定制500，502，503，504页面
ronin47
nginx 错误显示
server {
listen 80;
error_page 500/500.html;
error_page 502/502.html;
error_page 503/503.html;
error_page 504/504.html;
location /test {return502;}}
配置很简单，和配
java-1.二叉查找树转为双向链表
bylijinnan
二叉查找树
import java.util.ArrayList;
import java.util.List;
public class BSTreeToLinkedList {
/*
把二元查找树转变成排序的双向链表
题目：
输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。
要求不能创建任何新的结点，只调整指针的指向。
10
/ \
6 14
/ \
Netty源码学习-HTTP-tunnel
bylijinnan
java netty
Netty关于HTTP tunnel的说明：
http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description
这个说明有点太简略了
一个完整的例子在这里：
https://github.com/bylijinnan
JSONUtil.serialize(map)和JSON.toJSONString(map)的区别
coder_xpf
jquery json map val()
JSONUtil.serialize(map)和JSON.toJSONString(map)的区别
数据库查询出来的map有一个字段为空
通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
Hibernate缓存总结
cuishikuan
开源 ssh javaweb hibernate缓存 三大框架
一、为什么要用Hibernate缓存？
Hibernate是一个持久层框架，经常访问物理数据库。
为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。
缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。
二、Hibernate缓存原理是怎样的？
Hibernate缓存包括两大类：Hib
CentOs6
dalan_123
centos
首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
10款用 jquery 实现滚动条至页面底端自动加载数据效果
dcj3sjt126com
JavaScript
无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。
无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
ImageButton去边框&Button或者ImageButton的背景透明
dcj3sjt126com
imagebutton
在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法
一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX"
第二种方法就是将ImageButton背景改为透明，这个方法更常用
在XML里；
<ImageBut
JSP之c:foreach
eksliang
jsp forearch
原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html
<c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
Android实现主动连接蓝牙耳机
gqdy365
android
在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。
大致可以分三步：
一、扫描蓝牙设备：
1、注册并监听广播：
BluetoothAdapter.ACTION_DISCOVERY_STARTED
BluetoothDevice.ACTION_FOUND
BluetoothAdapter.ACTION_DIS
android学习轨迹之四：org.json.JSONException: No value for
hyz301
json
org.json.JSONException: No value for items
在JSON解析中会遇到一种错误，很常见的错误
06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
干货分享：从零开始学编程 系列汇总
justjavac
编程
程序员总爱重新发明轮子，于是做了要给轮子汇总。
从零开始写个编译器吧系列 (知乎专栏)
从零开始写一个简单的操作系统 (伯乐在线)
从零开始写JavaScript框架 (图灵社区)
从零开始写jQuery框架 (蓝色理想 )
从零开始nodejs系列文章 (粉丝日志)
从零开始编写网络游戏
jquery-autocomplete 使用手册
macroli
jquery Ajax 脚本
jquery-autocomplete学习
一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
当前版本：1.1
需要JQuery版本：1.2.6
二、使用
<script src="./jquery-1.3.2.js" type="text/ja
PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改
超声波
oracle plsql
在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
数据仓库数据模型之：极限存储--历史拉链表
superlxw1234
极限存储 数据仓库 数据模型 拉链历史表
在数据仓库的数据模型设计过程中，经常会遇到这样的需求：
1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态， 比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
10点睛Spring MVC4.1-全局异常处理
wiselyman
spring mvc
10.1 全局异常处理
使用@ControllerAdvice注解来实现全局异常处理;
使用@ControllerAdvice的属性缩小处理范围
10.2 演示
演示控制器
package com.wisely.web;
import org.springframework.stereotype.Controller;
import org.spring
